(window.webpackJsonp = window.webpackJsonp || []).push([
  [1],
  {
    './.storybook/preview.js-generated-config-entry.js': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.r(__webpack_exports__);
      var preview_namespaceObject = {};
      __webpack_require__.r(preview_namespaceObject),
        __webpack_require__.d(preview_namespaceObject, 'parameters', function () {
          return parameters;
        });
      var ClientApi = __webpack_require__('./node_modules/@storybook/client-api/dist/esm/ClientApi.js'),
        esm = __webpack_require__('./node_modules/@storybook/client-logger/dist/esm/index.js'),
        parameters = { docs: { theme: __webpack_require__('./node_modules/@storybook/theming/dist/esm/create.js').a.dark } };
      function ownKeys(object, enumerableOnly) {
        var keys = Object.keys(object);
        if (Object.getOwnPropertySymbols) {
          var symbols = Object.getOwnPropertySymbols(object);
          enumerableOnly &&
            (symbols = symbols.filter(function (sym) {
              return Object.getOwnPropertyDescriptor(object, sym).enumerable;
            })),
            keys.push.apply(keys, symbols);
        }
        return keys;
      }
      function _defineProperty(obj, key, value) {
        return (
          key in obj ? Object.defineProperty(obj, key, { value: value, enumerable: !0, configurable: !0, writable: !0 }) : (obj[key] = value), obj
        );
      }
      Object.keys(preview_namespaceObject).forEach(function (key) {
        var value = preview_namespaceObject[key];
        switch (key) {
          case 'args':
          case 'argTypes':
            return esm.a.warn('Invalid args/argTypes in config, ignoring.', JSON.stringify(value));
          case 'decorators':
            return value.forEach(function (decorator) {
              return Object(ClientApi.d)(decorator, !1);
            });
          case 'loaders':
            return value.forEach(function (loader) {
              return Object(ClientApi.e)(loader, !1);
            });
          case 'parameters':
            return Object(ClientApi.f)(
              (function _objectSpread(target) {
                for (var i = 1; i < arguments.length; i++) {
                  var source = null != arguments[i] ? arguments[i] : {};
                  i % 2
                    ? ownKeys(Object(source), !0).forEach(function (key) {
                        _defineProperty(target, key, source[key]);
                      })
                    : Object.getOwnPropertyDescriptors
                    ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source))
                    : ownKeys(Object(source)).forEach(function (key) {
                        Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
                      });
                }
                return target;
              })({}, value),
              !1,
            );
          case 'argTypesEnhancers':
            return value.forEach(function (enhancer) {
              return Object(ClientApi.b)(enhancer);
            });
          case 'argsEnhancers':
            return value.forEach(function (enhancer) {
              return Object(ClientApi.c)(enhancer);
            });
          case 'render':
            return Object(ClientApi.g)(value);
          case 'globals':
          case 'globalTypes':
            var v = {};
            return (v[key] = value), Object(ClientApi.f)(v, !1);
          case '__namedExportsOrder':
          case 'decorateStory':
          case 'renderToDOM':
            return null;
          default:
            return console.log(key + ' was not supported :( !');
        }
      });
    },
    './generated-stories-entry.js': function (module, exports, __webpack_require__) {
      'use strict';
      (function (module) {
        (0, __webpack_require__('./node_modules/@storybook/react/dist/esm/client/index.js').configure)(
          [
            __webpack_require__(
              './stories sync recursive ^\\.(?:(?:^|[\\\\/]|(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/])(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$',
            ),
          ],
          module,
          !1,
        );
      }.call(this, __webpack_require__('./node_modules/webpack/buildin/module.js')(module)));
    },
    './node_modules/css-loader/dist/cjs.js?!./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!./src/designer/editor-tools/RenderNode.css': function (
      module,
      exports,
      __webpack_require__,
    ) {
      (exports = __webpack_require__('./node_modules/css-loader/dist/runtime/api.js')(!1)).push([
        module.i,
        ".component-selected {\r\n  position: relative;\r\n}\r\n\r\n.component-selected:after {\r\n  content: ' ';\r\n  pointer-events: none;\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0;\r\n  display: block;\r\n  height: 100%;\r\n  width: 100%;\r\n  border: 2px dashed rgb(17, 138, 210);\r\n}\r\n",
        '',
      ]),
        (module.exports = exports);
    },
    './src/assets/button.svg': function (module, exports, __webpack_require__) {
      module.exports = __webpack_require__.p + 'static/media/button.5dc46a06.svg';
    },
    './src/assets/ccd-icon.svg': function (module, exports, __webpack_require__) {
      module.exports = __webpack_require__.p + 'static/media/ccd-icon.f38be3a5.svg';
    },
    './src/assets/column-1.svg': function (module, exports, __webpack_require__) {
      module.exports = __webpack_require__.p + 'static/media/column-1.708fbc72.svg';
    },
    './src/assets/row.svg': function (module, exports, __webpack_require__) {
      module.exports = __webpack_require__.p + 'static/media/row.f8da2fd6.svg';
    },
    './src/craft-components/basic/cbutton/CButton.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CButton;
      });
      var esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        es_button = __webpack_require__('./node_modules/antd/es/button/index.js'),
        jsx_runtime = (__webpack_require__('./node_modules/react/index.js'), __webpack_require__('./node_modules/react/jsx-runtime.js')),
        CButtonSettings = function (props) {
          return Object(jsx_runtime.jsx)('div', { children: '按钮配置项' });
        };
      (CButtonSettings.displayName = 'CButtonSettings'),
        (CButtonSettings.__docgenInfo = {
          description: '@class CButtonSettings\r\n\r\nCButton 对应的属性配置面板。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CButtonSettings',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\basic\\cbutton\\CButtonSettings.jsx'] = {
            name: 'CButtonSettings',
            docgenInfo: CButtonSettings.__docgenInfo,
            path: 'src\\craft-components\\basic\\cbutton\\CButtonSettings.jsx',
          });
      var CButton = function (props) {
        var _useNode$connectors = Object(esm.h)().connectors,
          connect = _useNode$connectors.connect,
          text = (_useNode$connectors.drag, props.text);
        return Object(jsx_runtime.jsx)(es_button.a, { ref: connect, children: text });
      };
      CButton.displayName = 'CButton';
      (CButton.craft = { props: { text: 'Button' }, related: { toolbar: CButtonSettings } }),
        (CButton.__docgenInfo = {
          description: '@class CButton\r\n\r\n包装原始的 Button 组件，暴露给 Designer。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CButton',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\basic\\cbutton\\CButton.jsx'] = {
            name: 'CButton',
            docgenInfo: CButton.__docgenInfo,
            path: 'src\\craft-components\\basic\\cbutton\\CButton.jsx',
          });
    },
    './src/craft-components/basic/ciframe/CIframe.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CIframe;
      });
      var esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        styled_components_browser_esm =
          (__webpack_require__('./node_modules/react/index.js'),
          __webpack_require__('./node_modules/styled-components/dist/styled-components.browser.esm.js')),
        es_form = __webpack_require__('./node_modules/antd/es/form/index.js'),
        CBorder = __webpack_require__('./src/designer/sider-bar/settings/form-items/CBorder.jsx'),
        CColorPicker = __webpack_require__('./src/designer/sider-bar/settings/form-items/CColorPicker.jsx'),
        CInputNumber = __webpack_require__('./src/designer/sider-bar/settings/form-items/CInputNumber.jsx'),
        CMargin = __webpack_require__('./src/designer/sider-bar/settings/form-items/CMargin.jsx'),
        CTextInput = __webpack_require__('./src/designer/sider-bar/settings/form-items/CTextInput.jsx'),
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        CIframeSettings = function (props) {
          return Object(jsx_runtime.jsxs)(es_form.a, {
            layout: 'vertical',
            children: [
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Iframe Source',
                children: Object(jsx_runtime.jsx)(CTextInput.a, Object.assign({}, props, { propKey: 'src' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Iframe Alt Text',
                children: Object(jsx_runtime.jsx)(CTextInput.a, Object.assign({}, props, { propKey: 'alt' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Height',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'height', min: 0, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Minimum Height',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'minHeight', min: 1, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Width',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'width', min: -1, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Border',
                children: Object(jsx_runtime.jsx)(CBorder.a, Object.assign({}, props, { propKey: 'border' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Background Color',
                children: Object(jsx_runtime.jsx)(CColorPicker.a, Object.assign({}, props, { propKey: 'bgColor' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Margin',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'margin' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Padding',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'padding' })),
              }),
            ],
          });
        };
      (CIframeSettings.displayName = 'CIframeSettings'),
        (CIframeSettings.__docgenInfo = {
          description: '@class CIframeSettings\r\n\r\nCIframe 对应的属性配置面板。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CIframeSettings',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\basic\\ciframe\\CIframeSettings.jsx'] = {
            name: 'CIframeSettings',
            docgenInfo: CIframeSettings.__docgenInfo,
            path: 'src\\craft-components\\basic\\ciframe\\CIframeSettings.jsx',
          });
      var defaultProps = {
          src: 'https://map.baidu.com/@13225221.26,3748918.53,12z',
          alt: 'MDN',
          height: 300,
          minHeight: 200,
          width: 400,
          maxWidth: '100%',
          margin: [0, 0, 0, 0],
          padding: [0, 0, 0, 0],
          borderSize: 0,
          borderType: 'solid',
          borderColor: { r: 32, g: 32, b: 32, a: 1 },
          bgColor: { r: 250, g: 250, b: 250, a: 1 },
        },
        Wrapper = styled_components_browser_esm.a.div`
  iframe {
    pointer-events: ${function (props) {
      return props.enabled ? 'none' : 'auto';
    }};
    width: 100% !important;
    height: 100% !important;
  }
`,
        CIframe = function (props) {
          var _props = (props = Object.assign({}, defaultProps, props)),
            src = _props.src,
            alt = _props.alt,
            width = _props.width,
            maxWidth = _props.maxWidth,
            height = _props.height,
            minHeight = _props.minHeight,
            margin = _props.margin,
            padding = _props.padding,
            borderSize = _props.borderSize,
            borderType = _props.borderType,
            borderColor = _props.borderColor,
            bgColor = _props.bgColor,
            enabled =
              (_props.children,
              Object(esm.f)(function (state) {
                return { enabled: state.options.enabled };
              }).enabled),
            _useNode$connectors = Object(esm.h)().connectors,
            connect = _useNode$connectors.connect;
          _useNode$connectors.drag;
          return Object(jsx_runtime.jsx)(Wrapper, {
            ref: connect,
            enabled: enabled,
            style: {
              width: `${width}px`,
              maxWidth: `${maxWidth}px`,
              height: `${height}px`,
              minHeight: `${minHeight}px`,
              margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
              padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
              border: `${borderSize}px ${borderType} rgba(${Object.values(borderColor)})`,
              backgroundColor: `rgba(${Object.values(bgColor)})`,
            },
            children: Object(jsx_runtime.jsx)('iframe', { src: src, alt: alt, style: { border: 'none' } }),
          });
        };
      (CIframe.displayName = 'CIframe'),
        (CIframe.craft = { displayName: 'Iframe', props: defaultProps, related: { toolbar: CIframeSettings } }),
        (CIframe.__docgenInfo = {
          description: '@class CIframe\r\n\r\n包装原始的 iframe 标签，暴露给 Designer。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CIframe',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\basic\\ciframe\\CIframe.jsx'] = {
            name: 'CIframe',
            docgenInfo: CIframe.__docgenInfo,
            path: 'src\\craft-components\\basic\\ciframe\\CIframe.jsx',
          });
    },
    './src/craft-components/basic/cimg/CImg.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CImg;
      });
      var esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        styled_components_browser_esm =
          (__webpack_require__('./node_modules/react/index.js'),
          __webpack_require__('./node_modules/styled-components/dist/styled-components.browser.esm.js')),
        es_form = __webpack_require__('./node_modules/antd/es/form/index.js'),
        CBorder = __webpack_require__('./src/designer/sider-bar/settings/form-items/CBorder.jsx'),
        CColorPicker = __webpack_require__('./src/designer/sider-bar/settings/form-items/CColorPicker.jsx'),
        CInputNumber = __webpack_require__('./src/designer/sider-bar/settings/form-items/CInputNumber.jsx'),
        CMargin = __webpack_require__('./src/designer/sider-bar/settings/form-items/CMargin.jsx'),
        CTextInput = __webpack_require__('./src/designer/sider-bar/settings/form-items/CTextInput.jsx'),
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        CImgSettings = function (props) {
          return Object(jsx_runtime.jsxs)(es_form.a, {
            layout: 'vertical',
            children: [
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Image Source',
                children: Object(jsx_runtime.jsx)(CTextInput.a, Object.assign({}, props, { propKey: 'src' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Image Alt Text',
                children: Object(jsx_runtime.jsx)(CTextInput.a, Object.assign({}, props, { propKey: 'alt' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Height',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'height', min: 0, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Minimum Height',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'minHeight', min: 1, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Width',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'width', min: -1, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Border',
                children: Object(jsx_runtime.jsx)(CBorder.a, Object.assign({}, props, { propKey: 'border' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Background Color',
                children: Object(jsx_runtime.jsx)(CColorPicker.a, Object.assign({}, props, { propKey: 'bgColor' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Margin',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'margin' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Padding',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'padding' })),
              }),
            ],
          });
        };
      (CImgSettings.displayName = 'CImgSettings'),
        (CImgSettings.__docgenInfo = {
          description: '@class CImgSettings\r\n\r\nCImg 对应的属性配置面板。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CImgSettings',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\basic\\cimg\\CImgSettings.jsx'] = {
            name: 'CImgSettings',
            docgenInfo: CImgSettings.__docgenInfo,
            path: 'src\\craft-components\\basic\\cimg\\CImgSettings.jsx',
          });
      var defaultProps = {
          src:
            '',
          alt: '',
          height: 200,
          minHeight: 200,
          width: 400,
          maxWidth: '100%',
          margin: [0, 0, 0, 0],
          padding: [0, 0, 0, 0],
          borderSize: 0,
          borderType: 'solid',
          borderColor: { r: 32, g: 32, b: 32, a: 1 },
          bgColor: { r: 250, g: 250, b: 250, a: 1 },
        },
        Wrapper = styled_components_browser_esm.a.div`
  img {
    pointer-events: ${function (props) {
      return props.enabled ? 'none' : 'auto';
    }};
    width: 100% !important;
    height: 100% !important;
    draggable: false;
  }
`,
        CImg = function (props) {
          var _props = (props = Object.assign({}, defaultProps, props)),
            src = _props.src,
            alt = _props.alt,
            width = _props.width,
            maxWidth = _props.maxWidth,
            height = _props.height,
            minHeight = _props.minHeight,
            margin = _props.margin,
            padding = _props.padding,
            borderSize = _props.borderSize,
            borderType = _props.borderType,
            borderColor = _props.borderColor,
            bgColor = _props.bgColor,
            _useNode$connectors = (_props.children, Object(esm.h)().connectors),
            connect = _useNode$connectors.connect;
          _useNode$connectors.drag;
          return Object(jsx_runtime.jsx)(Wrapper, {
            ref: connect,
            style: {
              width: `${width}px`,
              maxWidth: `${maxWidth}px`,
              height: `${height}px`,
              minHeight: `${minHeight}px`,
              margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
              padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
              border: `${borderSize}px ${borderType} rgba(${Object.values(borderColor)})`,
              backgroundColor: `rgba(${Object.values(bgColor)})`,
            },
            children: Object(jsx_runtime.jsx)('img', { draggable: 'false', src: src, alt: alt }),
          });
        };
      (CImg.displayName = 'CImg'),
        (CImg.craft = { displayName: 'Image', props: defaultProps, related: { toolbar: CImgSettings } }),
        (CImg.__docgenInfo = {
          description: '@class CImg\r\n\r\n包装原始的 img 标签，暴露给 Designer。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CImg',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\basic\\cimg\\CImg.jsx'] = {
            name: 'CImg',
            docgenInfo: CImg.__docgenInfo,
            path: 'src\\craft-components\\basic\\cimg\\CImg.jsx',
          });
    },
    './src/craft-components/basic/ctext/CText.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CText;
      });
      var esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        react_contenteditable =
          (__webpack_require__('./node_modules/react/index.js'),
          __webpack_require__('./node_modules/react-contenteditable/lib/react-contenteditable.js')),
        react_contenteditable_default = __webpack_require__.n(react_contenteditable),
        es_form = __webpack_require__('./node_modules/antd/es/form/index.js'),
        CColorPicker = __webpack_require__('./src/designer/sider-bar/settings/form-items/CColorPicker.jsx'),
        CInputNumber = __webpack_require__('./src/designer/sider-bar/settings/form-items/CInputNumber.jsx'),
        CMargin = __webpack_require__('./src/designer/sider-bar/settings/form-items/CMargin.jsx'),
        AlignLeftOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/AlignLeftOutlined.js'),
        AlignCenterOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/AlignCenterOutlined.js'),
        AlignRightOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/AlignRightOutlined.js'),
        es_radio = __webpack_require__('./node_modules/antd/es/radio/index.js'),
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        _excluded = ['propKey', 'onChange'];
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      var CTextAlign = function (_ref) {
        var _ref$propKey = _ref.propKey,
          propKey = void 0 === _ref$propKey ? 'textAlign' : _ref$propKey,
          onChange = _ref.onChange,
          _useNode =
            (_objectWithoutProperties(_ref, _excluded),
            Object(esm.h)(function (node) {
              return { propValue: node.data.props[propKey] };
            })),
          setProp = _useNode.actions.setProp,
          propValue = _useNode.propValue;
        return Object(jsx_runtime.jsxs)(es_radio.a.Group, {
          onChange: function (evt) {
            var val = evt.target.value;
            setProp(function (props) {
              props[propKey] = onChange ? onChange(val) : val;
            }, 100);
          },
          defaultValue: propValue,
          children: [
            Object(jsx_runtime.jsx)(es_radio.a.Button, { value: 'left', children: Object(jsx_runtime.jsx)(AlignLeftOutlined.a, {}) }),
            Object(jsx_runtime.jsx)(es_radio.a.Button, { value: 'center', children: Object(jsx_runtime.jsx)(AlignCenterOutlined.a, {}) }),
            Object(jsx_runtime.jsx)(es_radio.a.Button, { value: 'right', children: Object(jsx_runtime.jsx)(AlignRightOutlined.a, {}) }),
          ],
        });
      };
      (CTextAlign.displayName = 'CTextAlign'),
        (CTextAlign.__docgenInfo = {
          description: '@class CTextAlign\r\n\r\n用于修改 CSS  的 text-align 值。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CTextAlign',
          props: { propKey: { defaultValue: { value: "'textAlign'", computed: !1 }, required: !1 } },
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\settings\\form-items\\CTextAlign.jsx'] = {
            name: 'CTextAlign',
            docgenInfo: CTextAlign.__docgenInfo,
            path: 'src\\designer\\sider-bar\\settings\\form-items\\CTextAlign.jsx',
          });
      var CTextSettings = function (props) {
        return Object(jsx_runtime.jsxs)(es_form.a, {
          layout: 'vertical',
          children: [
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Text Color',
              children: Object(jsx_runtime.jsx)(CColorPicker.a, Object.assign({}, props, { propKey: 'color' })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Font Size',
              children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'fontSize' })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Font Weight',
              children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'fontWeight', min: 1, max: 1e5 })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Text Align',
              children: Object(jsx_runtime.jsx)(CTextAlign, Object.assign({}, props, { propKey: 'textAlign' })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Margin',
              children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'margin' })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Padding',
              children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'padding' })),
            }),
          ],
        });
      };
      (CTextSettings.displayName = 'CTextSettings'),
        (CTextSettings.__docgenInfo = {
          description: '@class CTextSettings\r\n\r\nCText 对应的属性配置面板。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CTextSettings',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\basic\\ctext\\CTextSettings.jsx'] = {
            name: 'CTextSettings',
            docgenInfo: CTextSettings.__docgenInfo,
            path: 'src\\craft-components\\basic\\ctext\\CTextSettings.jsx',
          });
      var CText = function (props) {
        var _props$fontSize = props.fontSize,
          fontSize = void 0 === _props$fontSize ? 15 : _props$fontSize,
          _props$textAlign = props.textAlign,
          textAlign = void 0 === _props$textAlign ? 'left' : _props$textAlign,
          _props$fontWeight = props.fontWeight,
          fontWeight = void 0 === _props$fontWeight ? 400 : _props$fontWeight,
          _props$color = props.color,
          color = void 0 === _props$color ? { r: 92, g: 90, b: 90, a: 1 } : _props$color,
          _props$shadow = props.shadow,
          shadow = void 0 === _props$shadow ? 0 : _props$shadow,
          _props$text = props.text,
          text = void 0 === _props$text ? 'Text' : _props$text,
          _props$margin = props.margin,
          margin = void 0 === _props$margin ? [0, 0, 0, 0] : _props$margin,
          _props$padding = props.padding,
          padding = void 0 === _props$padding ? [0, 0, 0, 0] : _props$padding,
          _useNode = Object(esm.h)(),
          connect = _useNode.connectors.connect,
          setProp = _useNode.actions.setProp,
          enabled = Object(esm.f)(function (state) {
            return { enabled: state.options.enabled };
          }).enabled;
        return Object(jsx_runtime.jsx)(react_contenteditable_default.a, {
          innerRef: connect,
          html: text,
          disabled: !enabled,
          onChange: function (e) {
            setProp(function (prop) {
              return (prop.text = e.target.value);
            }, 500);
          },
          tagName: 'p',
          style: {
            width: '100%',
            margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
            padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
            color: `rgba(${Object.values(color)})`,
            fontSize: `${fontSize}px`,
            textShadow: `0px 0px 2px rgba(0,0,0,${(shadow || 0) / 100})`,
            fontWeight: fontWeight,
            textAlign: textAlign,
          },
        });
      };
      (CText.displayName = 'CText'),
        (CText.craft = {
          displayName: 'Text',
          props: {
            fontSize: '15',
            textAlign: 'left',
            fontWeight: '500',
            color: { r: 92, g: 90, b: 90, a: 1 },
            margin: [0, 0, 0, 0],
            padding: [0, 0, 0, 0],
            shadow: 0,
            text: 'Text',
          },
          related: { toolbar: CTextSettings },
        }),
        (CText.__docgenInfo = {
          description: '@class CText\r\n\r\n包装原始的 ContentEditable 组件，暴露给 Designer。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CText',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\basic\\ctext\\CText.jsx'] = {
            name: 'CText',
            docgenInfo: CText.__docgenInfo,
            path: 'src\\craft-components\\basic\\ctext\\CText.jsx',
          });
    },
    './src/craft-components/basic/cvideo/CVideo.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CVideo;
      });
      var esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        styled_components_browser_esm =
          (__webpack_require__('./node_modules/react/index.js'),
          __webpack_require__('./node_modules/styled-components/dist/styled-components.browser.esm.js')),
        es_form = __webpack_require__('./node_modules/antd/es/form/index.js'),
        CBorder = __webpack_require__('./src/designer/sider-bar/settings/form-items/CBorder.jsx'),
        CColorPicker = __webpack_require__('./src/designer/sider-bar/settings/form-items/CColorPicker.jsx'),
        CInputNumber = __webpack_require__('./src/designer/sider-bar/settings/form-items/CInputNumber.jsx'),
        CMargin = __webpack_require__('./src/designer/sider-bar/settings/form-items/CMargin.jsx'),
        CTextInput = __webpack_require__('./src/designer/sider-bar/settings/form-items/CTextInput.jsx'),
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        CVideoSettings = function (props) {
          return Object(jsx_runtime.jsxs)(es_form.a, {
            layout: 'vertical',
            children: [
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Video Source',
                children: Object(jsx_runtime.jsx)(CTextInput.a, Object.assign({}, props, { propKey: 'src' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Video Poster',
                children: Object(jsx_runtime.jsx)(CTextInput.a, Object.assign({}, props, { propKey: 'poster' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Video Alt Text',
                children: Object(jsx_runtime.jsx)(CTextInput.a, Object.assign({}, props, { propKey: 'alt' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Height',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'height', min: 0, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Minimum Height',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'minHeight', min: 1, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Width',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'width', min: -1, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Border',
                children: Object(jsx_runtime.jsx)(CBorder.a, Object.assign({}, props, { propKey: 'border' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Background Color',
                children: Object(jsx_runtime.jsx)(CColorPicker.a, Object.assign({}, props, { propKey: 'bgColor' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Margin',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'margin' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Padding',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'padding' })),
              }),
            ],
          });
        };
      (CVideoSettings.displayName = 'CVideoSettings'),
        (CVideoSettings.__docgenInfo = {
          description: '@class CVideoSettings\r\n\r\nCVideo 对应的属性配置面板。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CVideoSettings',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\basic\\cvideo\\CVideoSettings.jsx'] = {
            name: 'CVideoSettings',
            docgenInfo: CVideoSettings.__docgenInfo,
            path: 'src\\craft-components\\basic\\cvideo\\CVideoSettings.jsx',
          });
      var defaultProps = {
          src: 'https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4',
          poster: 'https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217',
          alt: '',
          controls: !0,
          height: 300,
          minHeight: 200,
          width: 400,
          maxWidth: '100%',
          margin: [0, 0, 0, 0],
          padding: [0, 0, 0, 0],
          borderSize: 0,
          borderType: 'solid',
          borderColor: { r: 32, g: 32, b: 32, a: 1 },
          bgColor: { r: 250, g: 250, b: 250, a: 1 },
        },
        Wrapper = styled_components_browser_esm.a.div`
  video {
    pointer-events: ${function (props) {
      return props.enabled ? 'none' : 'auto';
    }};
    width: 100% !important;
    height: 100% !important;
  }
`,
        CVideo = function (props) {
          var _props = (props = Object.assign({}, defaultProps, props)),
            src = _props.src,
            poster = _props.poster,
            alt = _props.alt,
            controls = _props.controls,
            width = _props.width,
            maxWidth = _props.maxWidth,
            height = _props.height,
            minHeight = _props.minHeight,
            margin = _props.margin,
            padding = _props.padding,
            borderSize = _props.borderSize,
            borderType = _props.borderType,
            borderColor = _props.borderColor,
            bgColor = _props.bgColor,
            _useNode$connectors = (_props.children, Object(esm.h)().connectors),
            connect = _useNode$connectors.connect;
          _useNode$connectors.drag;
          return Object(jsx_runtime.jsx)(Wrapper, {
            ref: connect,
            style: {
              width: `${width}px`,
              maxWidth: `${maxWidth}px`,
              height: `${height}px`,
              minHeight: `${minHeight}px`,
              margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
              padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
              border: `${borderSize}px ${borderType} rgba(${Object.values(borderColor)})`,
              backgroundColor: `rgba(${Object.values(bgColor)})`,
            },
            children: Object(jsx_runtime.jsx)('video', { src: src, poster: poster, alt: alt, controls: controls }),
          });
        };
      (CVideo.displayName = 'CVideo'),
        (CVideo.craft = { displayName: 'Video', props: defaultProps, related: { toolbar: CVideoSettings } }),
        (CVideo.__docgenInfo = {
          description: '@class CVideo\r\n\r\n包装原始的 video 标签，暴露给 Designer。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CVideo',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\basic\\cvideo\\CVideo.jsx'] = {
            name: 'CVideo',
            docgenInfo: CVideo.__docgenInfo,
            path: 'src\\craft-components\\basic\\cvideo\\CVideo.jsx',
          });
    },
    './src/craft-components/cchart/CChart.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CChart;
      });
      var esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        echarts_for_react_esm = __webpack_require__('./node_modules/echarts-for-react/esm/index.js'),
        es_form = (__webpack_require__('./node_modules/react/index.js'), __webpack_require__('./node_modules/antd/es/form/index.js')),
        CBorder = __webpack_require__('./src/designer/sider-bar/settings/form-items/CBorder.jsx'),
        CColorPicker = __webpack_require__('./src/designer/sider-bar/settings/form-items/CColorPicker.jsx'),
        CInputNumber = __webpack_require__('./src/designer/sider-bar/settings/form-items/CInputNumber.jsx'),
        CMargin = __webpack_require__('./src/designer/sider-bar/settings/form-items/CMargin.jsx'),
        input = __webpack_require__('./node_modules/antd/es/input/index.js'),
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        _excluded = ['propKey', 'onChange'];
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      var TextArea = input.a.TextArea,
        CTextArea = function (_ref) {
          var propKey = _ref.propKey,
            onChange = _ref.onChange,
            props = _objectWithoutProperties(_ref, _excluded),
            _useNode = Object(esm.h)(function (node) {
              return { propValue: JSON.stringify(node.data.props[propKey]) };
            }),
            setProp = _useNode.actions.setProp,
            propValue = _useNode.propValue;
          return Object(jsx_runtime.jsx)(
            TextArea,
            Object.assign(
              {
                rows: 30,
                value: propValue,
                onChange: function (evt) {
                  var val = JSON.parse(evt.target.value);
                  setProp(function (props) {
                    props[propKey] = onChange ? onChange(val) : val;
                  }, 100);
                },
              },
              props,
            ),
          );
        };
      (CTextArea.displayName = 'CTextArea'),
        (CTextArea.__docgenInfo = {
          description: '@class CTextArea\r\n\r\n大段文本区域\r\n\r\n用于 Settings 面板中，修改组件的各种属性。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CTextArea',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\settings\\form-items\\CTextArea.jsx'] = {
            name: 'CTextArea',
            docgenInfo: CTextArea.__docgenInfo,
            path: 'src\\designer\\sider-bar\\settings\\form-items\\CTextArea.jsx',
          });
      var CChartSettings = function (props) {
        return Object(jsx_runtime.jsxs)(es_form.a, {
          layout: 'vertical',
          children: [
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Height',
              children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'height', min: 0, max: 1e5 })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Minimum Height',
              children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'minHeight', min: 1, max: 1e5 })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Width',
              children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'width', min: -1, max: 1e5 })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Border',
              children: Object(jsx_runtime.jsx)(CBorder.a, Object.assign({}, props, { propKey: 'border' })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Background Color',
              children: Object(jsx_runtime.jsx)(CColorPicker.a, Object.assign({}, props, { propKey: 'bgColor' })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Margin',
              children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'margin' })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Padding',
              children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'padding' })),
            }),
            Object(jsx_runtime.jsx)(es_form.a.Item, {
              label: 'Chart Options @see https://echarts.apache.org/',
              children: Object(jsx_runtime.jsx)(CTextArea, Object.assign({}, props, { propKey: 'chartOptions' })),
            }),
          ],
        });
      };
      (CChartSettings.displayName = 'CChartSettings'),
        (CChartSettings.__docgenInfo = {
          description: '@class CChartSettings\r\n\r\nCChart 对应的属性配置面板。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CChartSettings',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\cchart\\CChartSettings.jsx'] = {
            name: 'CChartSettings',
            docgenInfo: CChartSettings.__docgenInfo,
            path: 'src\\craft-components\\cchart\\CChartSettings.jsx',
          });
      var defaultProps = {
          height: 300,
          minHeight: 100,
          width: 400,
          maxWidth: '100%',
          margin: [0, 0, 0, 0],
          padding: [0, 0, 0, 0],
          borderSize: 0,
          borderType: 'solid',
          borderColor: { r: 32, g: 32, b: 32, a: 1 },
          bgColor: { r: 250, g: 250, b: 250, a: 1 },
          chartOptions: {
            title: { text: 'Proportion of Browsers', subtext: 'Fake Data', top: 10, left: 10 },
            tooltip: { trigger: 'item' },
            legend: {
              type: 'scroll',
              bottom: 0,
              data: (function () {
                for (var list = [], i = 1; i <= 28; i++) list.push(i + 2e3 + '');
                return list;
              })(),
            },
            visualMap: { top: 'middle', right: 10, color: ['red', 'yellow'], calculable: !0 },
            radar: {
              indicator: [
                { text: 'IE8-', max: 400 },
                { text: 'IE9+', max: 400 },
                { text: 'Safari', max: 400 },
                { text: 'Firefox', max: 400 },
                { text: 'Chrome', max: 400 },
              ],
            },
            series: (function () {
              for (var series = [], i = 1; i <= 28; i++)
                series.push({
                  type: 'radar',
                  symbol: 'none',
                  lineStyle: { width: 1 },
                  emphasis: { areaStyle: { color: 'rgba(0,250,0,0.3)' } },
                  data: [{ value: [10 * (40 - i), 4 * (38 - i) + 60, 5 * i + 10, 9 * i, (i * i) / 2], name: i + 2e3 + '' }],
                });
              return series;
            })(),
          },
        },
        CChart = function (props) {
          var _props = (props = Object.assign({}, defaultProps, props)),
            chartOptions = _props.chartOptions,
            width = _props.width,
            maxWidth = _props.maxWidth,
            height = _props.height,
            minHeight = _props.minHeight,
            margin = _props.margin,
            padding = _props.padding,
            borderSize = _props.borderSize,
            borderType = _props.borderType,
            borderColor = _props.borderColor,
            bgColor = _props.bgColor,
            _useNode$connectors = (_props.children, Object(esm.h)().connectors),
            connect = _useNode$connectors.connect;
          _useNode$connectors.drag;
          return Object(jsx_runtime.jsx)('div', {
            ref: connect,
            style: {
              width: `${width}px`,
              maxWidth: `${maxWidth}px`,
              height: `${height}px`,
              minHeight: `${minHeight}px`,
              margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
              padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
              border: `${borderSize}px ${borderType} rgba(${Object.values(borderColor)})`,
              backgroundColor: `rgba(${Object.values(bgColor)})`,
            },
            children: Object(jsx_runtime.jsx)(echarts_for_react_esm.a, { option: chartOptions, style: { width: '100%', height: '100%' } }),
          });
        };
      (CChart.displayName = 'CChart'),
        (CChart.craft = { displayName: 'Chart', props: defaultProps, related: { toolbar: CChartSettings } }),
        (CChart.__docgenInfo = {
          description: '@class CChart\r\n\r\n包装原始的 iframe 标签，暴露给 Designer。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CChart',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\cchart\\CChart.jsx'] = {
            name: 'CChart',
            docgenInfo: CChart.__docgenInfo,
            path: 'src\\craft-components\\cchart\\CChart.jsx',
          });
    },
    './src/craft-components/layout/ccolumn/CColumn.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CColumn;
      });
      var esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        es_form = (__webpack_require__('./node_modules/react/index.js'), __webpack_require__('./node_modules/antd/es/form/index.js')),
        CBorder = __webpack_require__('./src/designer/sider-bar/settings/form-items/CBorder.jsx'),
        CColorPicker = __webpack_require__('./src/designer/sider-bar/settings/form-items/CColorPicker.jsx'),
        CInputNumber = __webpack_require__('./src/designer/sider-bar/settings/form-items/CInputNumber.jsx'),
        CMargin = __webpack_require__('./src/designer/sider-bar/settings/form-items/CMargin.jsx'),
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        CColumnSettings = function (props) {
          return Object(jsx_runtime.jsxs)(es_form.a, {
            layout: 'vertical',
            children: [
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Minimum Height',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'minHeight', min: 1, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Flex',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'flex', min: 1, max: 100 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Width',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'width', min: -1, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Border',
                children: Object(jsx_runtime.jsx)(CBorder.a, Object.assign({}, props, { propKey: 'border' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Background Color',
                children: Object(jsx_runtime.jsx)(CColorPicker.a, Object.assign({}, props, { propKey: 'bgColor' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Margin',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'margin' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Padding',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'padding' })),
              }),
            ],
          });
        };
      (CColumnSettings.displayName = 'CColumnSettings'),
        (CColumnSettings.__docgenInfo = {
          description: '@class CColumnSettings\r\n\r\nColumn 对应的属性配置面板。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CColumnSettings',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\layout\\ccolumn\\CColumnSettings.jsx'] = {
            name: 'CColumnSettings',
            docgenInfo: CColumnSettings.__docgenInfo,
            path: 'src\\craft-components\\layout\\ccolumn\\CColumnSettings.jsx',
          });
      var defaultProps = {
          minHeight: 40,
          width: -1,
          flex: 1,
          margin: [0, 0, 0, 0],
          padding: [10, 10, 10, 10],
          borderSize: 1,
          borderType: 'dashed',
          borderColor: { r: 32, g: 32, b: 32, a: 1 },
          bgColor: { r: 250, g: 250, b: 250, a: 1 },
        },
        CColumn = function (props) {
          var style,
            _props = (props = Object.assign({}, defaultProps, props)),
            minHeight = _props.minHeight,
            margin = _props.margin,
            padding = _props.padding,
            borderSize = _props.borderSize,
            borderType = _props.borderType,
            borderColor = _props.borderColor,
            bgColor = _props.bgColor,
            width = _props.width,
            flex = _props.flex,
            children = _props.children,
            _useNode$connectors = Object(esm.h)().connectors,
            connect = _useNode$connectors.connect;
          _useNode$connectors.drag;
          return Object(jsx_runtime.jsx)('div', {
            ref: connect,
            style:
              ((style = {
                minHeight: `${minHeight}px`,
                margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
                padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
                border: `${borderSize}px ${borderType} rgba(${Object.values(borderColor)})`,
                backgroundColor: `rgba(${Object.values(bgColor)})`,
              }),
              width < 0 ? (style.flex = flex) : (style.width = `${width}px`),
              style),
            children: children,
          });
        };
      (CColumn.displayName = 'CColumn'),
        (CColumn.craft = {
          displayName: 'CColumn',
          props: defaultProps,
          related: { toolbar: CColumnSettings },
          rules: {
            canMoveIn: function (nodes) {
              return nodes.every(function (node) {
                return node.data.type !== CColumn;
              });
            },
          },
        }),
        (CColumn.__docgenInfo = {
          description:
            '@class CColumn\r\n\r\nCColumn component.\r\n\r\n- CColumn can NOT have child nodes of itself.\r\n- CColumn can only be a child of CRow component.\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CColumn',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\layout\\ccolumn\\CColumn.jsx'] = {
            name: 'CColumn',
            docgenInfo: CColumn.__docgenInfo,
            path: 'src\\craft-components\\layout\\ccolumn\\CColumn.jsx',
          });
    },
    './src/craft-components/layout/crow/CRow.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CRow;
      });
      var esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        CColumn = (__webpack_require__('./node_modules/react/index.js'), __webpack_require__('./src/craft-components/layout/ccolumn/CColumn.jsx')),
        es_form = __webpack_require__('./node_modules/antd/es/form/index.js'),
        CBorder = __webpack_require__('./src/designer/sider-bar/settings/form-items/CBorder.jsx'),
        CColorPicker = __webpack_require__('./src/designer/sider-bar/settings/form-items/CColorPicker.jsx'),
        CInputNumber = __webpack_require__('./src/designer/sider-bar/settings/form-items/CInputNumber.jsx'),
        CMargin = __webpack_require__('./src/designer/sider-bar/settings/form-items/CMargin.jsx'),
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        CRowSettings = function (props) {
          return Object(jsx_runtime.jsxs)(es_form.a, {
            layout: 'vertical',
            children: [
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Minimum Height',
                children: Object(jsx_runtime.jsx)(CInputNumber.a, Object.assign({}, props, { propKey: 'minHeight', min: 1, max: 1e5 })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Border',
                children: Object(jsx_runtime.jsx)(CBorder.a, Object.assign({}, props, { propKey: 'border' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Background Color',
                children: Object(jsx_runtime.jsx)(CColorPicker.a, Object.assign({}, props, { propKey: 'bgColor' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Margin',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'margin' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Padding',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'padding' })),
              }),
            ],
          });
        };
      (CRowSettings.displayName = 'CRowSettings'),
        (CRowSettings.__docgenInfo = {
          description: '@class CRowSettings\r\n\r\nCRow 对应的属性配置面板。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CRowSettings',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\layout\\crow\\CRowSettings.jsx'] = {
            name: 'CRowSettings',
            docgenInfo: CRowSettings.__docgenInfo,
            path: 'src\\craft-components\\layout\\crow\\CRowSettings.jsx',
          });
      var defaultProps = {
          minHeight: 40,
          margin: [0, 0, 0, 0],
          padding: [10, 10, 10, 10],
          borderSize: 1,
          borderType: 'solid',
          borderColor: { r: 32, g: 32, b: 32, a: 1 },
          display: 'flex',
          bgColor: { r: 200, g: 200, b: 200, a: 1 },
        },
        CRow = function (props) {
          var _props = (props = Object.assign({}, defaultProps, props)),
            minHeight = _props.minHeight,
            margin = _props.margin,
            padding = _props.padding,
            borderSize = _props.borderSize,
            borderType = _props.borderType,
            borderColor = _props.borderColor,
            bgColor = _props.bgColor,
            display = _props.display,
            children = _props.children,
            _useNode$connectors = Object(esm.h)().connectors,
            connect = _useNode$connectors.connect;
          _useNode$connectors.drag;
          return Object(jsx_runtime.jsx)('div', {
            ref: connect,
            style: {
              margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
              padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
              border: `${borderSize}px ${borderType} rgba(${Object.values(borderColor)})`,
              minHeight: `${minHeight}px`,
              display: display,
              backgroundColor: `rgba(${Object.values(bgColor)})`,
            },
            children: children,
          });
        };
      (CRow.displayName = 'CRow'),
        (CRow.craft = {
          displayName: 'CRow',
          props: defaultProps,
          related: { toolbar: CRowSettings },
          rules: {
            canMoveIn: function (nodes) {
              return nodes.every(function (node) {
                return node.data.type === CColumn.a;
              });
            },
          },
        }),
        (CRow.__docgenInfo = {
          description:
            '@class CRow\r\n\r\nRow\r\n\r\n- Row has a width default to 100%.\r\n- Only Columns are allowed inside a Row, any other types are forbidden.\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CRow',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\craft-components\\layout\\crow\\CRow.jsx'] = {
            name: 'CRow',
            docgenInfo: CRow.__docgenInfo,
            path: 'src\\craft-components\\layout\\crow\\CRow.jsx',
          });
    },
    './src/designer/CraftDesigner.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'b', function () {
        return defaultComponentTypes;
      }),
        __webpack_require__.d(__webpack_exports__, 'a', function () {
          return CraftDesigner;
        });
      var esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        classnames = __webpack_require__('./node_modules/classnames/index.js'),
        classnames_default = __webpack_require__.n(classnames),
        react = __webpack_require__('./node_modules/react/index.js'),
        react_default = __webpack_require__.n(react),
        lib = __webpack_require__('./node_modules/react-custom-scrollbars/lib/index.js'),
        styled_components_browser_esm = __webpack_require__('./node_modules/styled-components/dist/styled-components.browser.esm.js'),
        CButton = __webpack_require__('./src/craft-components/basic/cbutton/CButton.jsx'),
        CIframe = __webpack_require__('./src/craft-components/basic/ciframe/CIframe.jsx'),
        CImg = __webpack_require__('./src/craft-components/basic/cimg/CImg.jsx'),
        CText = __webpack_require__('./src/craft-components/basic/ctext/CText.jsx'),
        CVideo = __webpack_require__('./src/craft-components/basic/cvideo/CVideo.jsx'),
        CChart = __webpack_require__('./src/craft-components/cchart/CChart.jsx'),
        CColumn = __webpack_require__('./src/craft-components/layout/ccolumn/CColumn.jsx'),
        CRow = __webpack_require__('./src/craft-components/layout/crow/CRow.jsx'),
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        DataDeserializer = function (props) {
          var pageData = props.pageData,
            actions = Object(esm.f)().actions;
          return (
            Object(react.useEffect)(
              function () {
                pageData && actions.history.ignore().deserialize(pageData);
              },
              [pageData],
            ),
            Object(jsx_runtime.jsx)(jsx_runtime.Fragment, {})
          );
        };
      (DataDeserializer.__docgenInfo = {
        description:
          '@class DataDeserializer\r\n\r\n- 用来把 pageData 反序列化成页面\r\n- 这是一个纯逻辑组件，它没有外观\r\n- DataDeserializer 中使用了 useEditor() 钩子，所以它只能在 Editor 上下文内部使用\r\n- 参见 https://craft.js.org/docs/api/frame\r\n\r\n@author 3051813192@qq.com',
        methods: [],
        displayName: 'DataDeserializer',
      }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\DataDeserializer.jsx'] = {
            name: 'DataDeserializer',
            docgenInfo: DataDeserializer.__docgenInfo,
            path: 'src\\designer\\DataDeserializer.jsx',
          });
      var DragOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/DragOutlined.js'),
        ArrowUpOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/ArrowUpOutlined.js'),
        DeleteOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/DeleteOutlined.js'),
        dist_esm = __webpack_require__('./node_modules/@craftjs/utils/dist/esm/index.js'),
        react_dom = __webpack_require__('./node_modules/react-dom/index.js'),
        react_dom_default = __webpack_require__.n(react_dom),
        IndicatorDiv =
          (__webpack_require__('./src/designer/editor-tools/RenderNode.css'),
          styled_components_browser_esm.a.div`
  height: 30px;
  margin-top: -29px;
  font-size: 12px;
  line-height: 12px;

  svg {
    fill: #fff;
    width: 15px;
    height: 15px;
  }
`),
        Btn = styled_components_browser_esm.a.a`
  padding: 0 0px;
  opacity: 0.9;
  display: flex;
  align-items: center;
  > div {
    position: relative;
    top: -50%;
    left: -50%;
  }
`,
        RenderNode_RenderNode = function (_ref) {
          var render = _ref.render,
            id = Object(esm.h)().id,
            _useEditor = Object(esm.f)(function (_, query) {
              return { isActive: query.getEvent('selected').contains(id) };
            }),
            actions = _useEditor.actions,
            query = _useEditor.query,
            isActive = _useEditor.isActive,
            _useNode2 = Object(esm.h)(function (node) {
              return {
                isHover: node.events.hovered,
                dom: node.dom,
                name: node.data.custom.displayName || node.data.displayName,
                moveable: query.node(node.id).isDraggable(),
                deletable: query.node(node.id).isDeletable(),
                parent: node.data.parent,
                props: node.data.props,
              };
            }),
            isHover = _useNode2.isHover,
            dom = _useNode2.dom,
            name = _useNode2.name,
            moveable = _useNode2.moveable,
            deletable = _useNode2.deletable,
            drag = _useNode2.connectors.drag,
            parent = _useNode2.parent,
            currentRef = Object(react.useRef)();
          Object(react.useEffect)(
            function () {
              dom && (isActive || isHover ? dom.classList.add('component-selected') : dom.classList.remove('component-selected'));
            },
            [dom, isActive, isHover],
          );
          var getPos = Object(react.useCallback)(function (dom) {
              var _ref2 = dom ? dom.getBoundingClientRect() : { top: 0, left: 0, bottom: 0 },
                top = _ref2.top,
                left = _ref2.left,
                bottom = _ref2.bottom;
              return { top: `${top > 0 ? top : bottom}px`, left: `${left}px` };
            }, []),
            scroll = Object(react.useCallback)(
              function () {
                var currentDOM = currentRef.current;
                if (currentDOM) {
                  var _getPos = getPos(dom),
                    top = _getPos.top,
                    left = _getPos.left;
                  (currentDOM.style.top = top), (currentDOM.style.left = left);
                }
              },
              [dom, getPos],
            );
          return (
            Object(react.useEffect)(
              function () {
                return (
                  document.querySelector('.craftjs-renderer').addEventListener('scroll', scroll),
                  function () {
                    document.querySelector('.craftjs-renderer').removeEventListener('scroll', scroll);
                  }
                );
              },
              [scroll],
            ),
            Object(jsx_runtime.jsxs)(jsx_runtime.Fragment, {
              children: [
                isHover || isActive
                  ? react_dom_default.a.createPortal(
                      Object(jsx_runtime.jsxs)(IndicatorDiv, {
                        ref: currentRef,
                        style: {
                          color: '#FFF',
                          padding: '15px',
                          alignItems: 'center',
                          display: 'flex',
                          position: 'fixed',
                          backgroundColor: 'rgb(17, 138, 210)',
                          left: getPos(dom).left,
                          top: getPos(dom).top,
                          zIndex: 9999,
                        },
                        children: [
                          Object(jsx_runtime.jsx)('h2', {
                            style: { fleX: 1, marginRight: '1rem', marginBottom: '0', color: '#fff', fontSize: '12px' },
                            children: name,
                          }),
                          moveable
                            ? Object(jsx_runtime.jsx)(Btn, {
                                style: { fleX: 1, marginRight: '1rem', cursor: 'move' },
                                ref: drag,
                                children: Object(jsx_runtime.jsx)(DragOutlined.a, {}),
                              })
                            : null,
                          id !== dist_esm.x &&
                            Object(jsx_runtime.jsx)(Btn, {
                              style: { marginRight: '1rem', cursor: 'pointer' },
                              onClick: function () {
                                actions.selectNode(parent);
                              },
                              children: Object(jsx_runtime.jsx)(ArrowUpOutlined.a, {}),
                            }),
                          deletable
                            ? Object(jsx_runtime.jsx)(Btn, {
                                style: { cursor: 'pointer' },
                                onMouseDown: function (e) {
                                  e.stopPropagation(), actions.delete(id);
                                },
                                children: Object(jsx_runtime.jsx)(DeleteOutlined.a, {}),
                              })
                            : null,
                        ],
                      }),
                      document.querySelector('.page-container'),
                    )
                  : null,
                render,
              ],
            })
          );
        };
      (RenderNode_RenderNode.__docgenInfo = { description: '', methods: [], displayName: 'RenderNode' }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\editor-tools\\RenderNode.jsx'] = {
            name: 'RenderNode',
            docgenInfo: RenderNode_RenderNode.__docgenInfo,
            path: 'src\\designer\\editor-tools\\RenderNode.jsx',
          });
      var EyeOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/EyeOutlined.js'),
        UndoOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/UndoOutlined.js'),
        RedoOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/RedoOutlined.js'),
        SaveOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/SaveOutlined.js'),
        DownloadOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/DownloadOutlined.js'),
        QuestionCircleOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/QuestionCircleOutlined.js'),
        GithubOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/GithubOutlined.js'),
        row = __webpack_require__('./node_modules/antd/es/row/index.js'),
        col = __webpack_require__('./node_modules/antd/es/col/index.js'),
        es_button = __webpack_require__('./node_modules/antd/es/button/index.js'),
        message = __webpack_require__('./node_modules/antd/es/message/index.js'),
        ccd_icon = __webpack_require__('./src/assets/ccd-icon.svg'),
        ccd_icon_default = __webpack_require__.n(ccd_icon),
        NavBarWrapper = styled_components_browser_esm.a.div`
  border: none;
  height: 44px;
  overflow: hidden;
  width: 100vw;
  line-height: 44px;
  padding: 0px 15px;
  background: #261c2c;
  color: #f7f7f7;

  a {
    img {
      width: 60px;
      margin-top: -8px;
      margin-left: -15px;
    }
  }

  span {
    font-size: 18px;
    color: #fff;
  }

  .versionText {
    position: absolute;
    font-size: 10px;
    padding: 2px;
    border-radius: 0;
    left: 246px;
    top: 17px;
    height: 16px;
    line-height: 12px;
    text-align: center;
    font-weight: bold;
  }

  .buttonGroup {
    button {
      background: #3e2c41;
      color: #fff;
      border: none;
      border-radius: 0;
    }
  }
`,
        iconStyle = { color: '#fff' },
        NavBar = function (props) {
          var query = Object(esm.f)().query,
            onPreview = props.onPreview,
            onDelete = props.onDelete,
            onUndo = props.onUndo,
            onRedo = props.onRedo,
            onSaveData = props.onSaveData,
            onLoadData = props.onLoadData,
            onHelp = props.onHelp;
          return Object(jsx_runtime.jsx)(NavBarWrapper, {
            children: Object(jsx_runtime.jsxs)(row.a, {
              children: [
                Object(jsx_runtime.jsxs)(col.a, {
                  span: 12,
                  style: { textAlign: 'left' },
                  children: [
                    Object(jsx_runtime.jsx)('a', { href: '#', children: Object(jsx_runtime.jsx)('img', { src: ccd_icon_default.a }) }),
                    Object(jsx_runtime.jsx)('span', { children: 'Craft Codeless Designer' }),
                    Object(jsx_runtime.jsx)('div', { className: 'versionText', children: 'v1.0.3' }),
                  ],
                }),
                Object(jsx_runtime.jsx)(col.a, {
                  span: 12,
                  style: { textAlign: 'end' },
                  children: Object(jsx_runtime.jsxs)(es_button.a.Group, {
                    className: 'buttonGroup',
                    children: [
                      Object(jsx_runtime.jsx)(es_button.a, {
                        title: 'Preview the page.',
                        icon: Object(jsx_runtime.jsx)(EyeOutlined.a, {
                          style: iconStyle,
                          onClick: function (evt) {
                            try {
                              onPreview && onPreview(evt);
                            } catch (error) {
                              console.error(error), message.b.error(error);
                            }
                          },
                        }),
                      }),
                      Object(jsx_runtime.jsx)(es_button.a, {
                        title: 'Delete, hit Delete key.',
                        icon: Object(jsx_runtime.jsx)(DeleteOutlined.a, {
                          style: iconStyle,
                          onClick: function (evt) {
                            try {
                              onDelete && onDelete(evt);
                            } catch (error) {
                              console.error(error), message.b.error(error);
                            }
                          },
                        }),
                      }),
                      Object(jsx_runtime.jsx)(es_button.a, {
                        title: 'Undo',
                        icon: Object(jsx_runtime.jsx)(UndoOutlined.a, {
                          style: iconStyle,
                          onClick: function (evt) {
                            try {
                              onUndo && onUndo(evt);
                            } catch (error) {
                              console.error(error), message.b.error(error);
                            }
                          },
                        }),
                      }),
                      Object(jsx_runtime.jsx)(es_button.a, {
                        title: 'Redo',
                        icon: Object(jsx_runtime.jsx)(RedoOutlined.a, {
                          style: iconStyle,
                          onClick: function (evt) {
                            try {
                              onRedo && onRedo(evt);
                            } catch (error) {
                              console.error(error), message.b.error(error);
                            }
                          },
                        }),
                      }),
                      Object(jsx_runtime.jsx)(es_button.a, {
                        title: 'Save',
                        icon: Object(jsx_runtime.jsx)(SaveOutlined.a, { style: iconStyle }),
                        onClick: function (evt) {
                          try {
                            var jsonStr = query.serialize();
                            console.log(jsonStr), onSaveData && onSaveData(jsonStr);
                          } catch (error) {
                            console.error(error), message.b.error(error);
                          }
                        },
                      }),
                      Object(jsx_runtime.jsx)(es_button.a, {
                        title: 'Load',
                        icon: Object(jsx_runtime.jsx)(DownloadOutlined.a, { style: iconStyle }),
                        onClick: function (evt) {
                          try {
                            onLoadData && onLoadData(evt);
                          } catch (error) {
                            console.error(error), message.b.error(error);
                          }
                        },
                      }),
                      Object(jsx_runtime.jsx)(es_button.a, {
                        title: 'Help',
                        icon: Object(jsx_runtime.jsx)(QuestionCircleOutlined.a, {
                          style: iconStyle,
                          onClick: function (evt) {
                            try {
                              onHelp && onHelp(evt);
                            } catch (error) {
                              console.error(error), message.b.error(error);
                            }
                          },
                        }),
                      }),
                      Object(jsx_runtime.jsx)(es_button.a, {
                        title: 'Github',
                        icon: Object(jsx_runtime.jsx)(GithubOutlined.a, { style: iconStyle }),
                        onClick: function (evt) {
                          window.open('https://github.com/Craft-Codeless-Designer/Craft-Codeless-Designer', '_blank');
                        },
                      }),
                    ],
                  }),
                }),
              ],
            }),
          });
        };
      (NavBar.displayName = 'NavBar'),
        (NavBar.__docgenInfo = {
          description:
            '@class NavBar\r\n\r\nThe navigation bar at the top of the designer.\r\n\r\nCallbacks on the props:\r\n\r\n- onPreview(evt)\r\n- onDelete(evt)\r\n- onUndo(evt)\r\n- onRedo(evt)\r\n- onSaveData(jsonStr)\r\n- onLoadData(evt)\r\n- onHelp()\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'NavBar',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\nav-bar\\NavBar.jsx'] = {
            name: 'NavBar',
            docgenInfo: NavBar.__docgenInfo,
            path: 'src\\designer\\nav-bar\\NavBar.jsx',
          });
      var RootAreaWrapper = styled_components_browser_esm.a.div`
  width: 100%;
  min-height: 200px;
  height: 100%;
  padding: 5px; //FIXME: only available in design mode
  background-color: #e0e0e0;
`,
        RootCanvasArea = function (props) {
          var _useNode$connectors = Object(esm.h)().connectors,
            connect = _useNode$connectors.connect,
            drag = _useNode$connectors.drag,
            children = props.children;
          return Object(jsx_runtime.jsx)(RootAreaWrapper, {
            ref: function (ref) {
              return connect(drag(ref));
            },
            children: children,
          });
        };
      (RootCanvasArea.displayName = 'RootCanvasArea'),
        (RootCanvasArea.__docgenInfo = {
          description:
            '@class RootCanvasArea\r\n\r\nThe root container of the designer, this node can NOT be deleted.\r\nIf this node is deleted, there is nothing we can do with the designer.\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'RootCanvasArea',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\root-canvas-area\\RootCanvasArea.jsx'] = {
            name: 'RootCanvasArea',
            docgenInfo: RootCanvasArea.__docgenInfo,
            path: 'src\\designer\\root-canvas-area\\RootCanvasArea.jsx',
          });
      var default_icon_list = __webpack_require__('./src/designer/sider-bar/icon-list/default-icon-list.jsx'),
        IconListWrapper = styled_components_browser_esm.a.div`
  width: 100%;
  height: 100%;
  padding: 15px 10px 0px 15px;
  overflow: hidden;
`,
        IconList = function (props) {
          var _props$iconList = props.iconList,
            iconList = void 0 === _props$iconList ? default_icon_list.a : _props$iconList;
          return Object(jsx_runtime.jsx)(lib.Scrollbars, {
            autoHide: !0,
            autoHideTimeout: 1e3,
            autoHideDuration: 50,
            autoHeight: !0,
            autoHeightMin: 0,
            autoHeightMax: 'calc(100vh - 44px)',
            thumbMinSize: 30,
            children: Object(jsx_runtime.jsx)(IconListWrapper, {
              children: Object(jsx_runtime.jsx)(row.a, {
                align: 'middle',
                gutter: [5, 15],
                children: iconList.map(function (icon, index) {
                  return Object(jsx_runtime.jsx)(col.a, { span: 8, children: icon }, `col-${index}`);
                }),
              }),
            }),
          });
        };
      (IconList.displayName = 'IconList'),
        (IconList.__docgenInfo = {
          description: '@class IconList\r\n\r\n侧边栏图标列表。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'IconList',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\icon-list\\IconList.jsx'] = {
            name: 'IconList',
            docgenInfo: IconList.__docgenInfo,
            path: 'src\\designer\\sider-bar\\icon-list\\IconList.jsx',
          });
      var tabs = __webpack_require__('./node_modules/antd/es/tabs/index.js'),
        layers_dist_esm = __webpack_require__('./node_modules/@craftjs/layers/dist/esm/index.js'),
        LayersPanel = function (props) {
          return Object(jsx_runtime.jsx)(lib.Scrollbars, {
            autoHide: !0,
            autoHideTimeout: 1e3,
            autoHideDuration: 50,
            autoHeight: !0,
            autoHeightMin: 0,
            autoHeightMax: 'calc(100vh - 44px)',
            thumbMinSize: 30,
            children: Object(jsx_runtime.jsx)(layers_dist_esm.a, { expandRootOnLoad: !0 }),
          });
        };
      (LayersPanel.displayName = 'LayersPanel'),
        (LayersPanel.__docgenInfo = {
          description: '@class LayersPanel\r\n\r\n组件层级结构展示面板。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'LayersPanel',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\layers-panel\\LayersPanel.jsx'] = {
            name: 'LayersPanel',
            docgenInfo: LayersPanel.__docgenInfo,
            path: 'src\\designer\\sider-bar\\layers-panel\\LayersPanel.jsx',
          });
      var SettingsWrapper = styled_components_browser_esm.a.div`
  overflow: hidden;
  padding: 15px;
  margin-bottom: 15px;
`,
        SettingsContainer = function (props) {
          var _useEditor = Object(esm.f)(function (state, query) {
              var currentlySelectedNodeId = query.getEvent('selected').first();
              return { active: currentlySelectedNodeId, related: currentlySelectedNodeId && state.nodes[currentlySelectedNodeId].related };
            }),
            active = _useEditor.active,
            related = _useEditor.related;
          return Object(jsx_runtime.jsx)(lib.Scrollbars, {
            autoHide: !0,
            autoHideTimeout: 1e3,
            autoHideDuration: 50,
            autoHeight: !0,
            autoHeightMin: 0,
            autoHeightMax: 'calc(100vh - 44px)',
            thumbMinSize: 30,
            children: Object(jsx_runtime.jsxs)(SettingsWrapper, {
              children: [
                active && related.toolbar && react_default.a.createElement(related.toolbar),
                !active &&
                  Object(jsx_runtime.jsx)('div', {
                    style: { color: '#938787', fontWeight: '500', fontSize: '14px' },
                    children: 'Click on a component to edit its properties.',
                  }),
              ],
            }),
          });
        };
      (SettingsContainer.displayName = 'SettingsContainer'),
        (SettingsContainer.__docgenInfo = {
          description: '@class SettingsContainer\r\n\r\n配置项容器。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'SettingsContainer',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\settings\\SettingsContainer.jsx'] = {
            name: 'SettingsContainer',
            docgenInfo: SettingsContainer.__docgenInfo,
            path: 'src\\designer\\sider-bar\\settings\\SettingsContainer.jsx',
          });
      var TabPane = tabs.a.TabPane,
        SiderBarWrapper = styled_components_browser_esm.a.div`
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #cfdaf0;

  /* override antd default tab styles */
  /* FIXME:refactor the css using LESS */
  .ant-tabs > .ant-tabs-nav .ant-tabs-nav-list,
  .ant-tabs > div > .ant-tabs-nav .ant-tabs-nav-list {
    position: relative;
    display: flex;
    transition: transform 0.3s;
    width: 100%;
  }
  .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab,
  .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab {
    margin: 0;
    padding: 8px 16px;
    background: #696185;
    border: none;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    color: #f7f7f7;
  }
  .ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab,
  .ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab {
    border-radius: 0;
  }
  .ant-tabs-card > .ant-tabs-nav .ant-tabs-tab-active,
  .ant-tabs-card > div > .ant-tabs-nav .ant-tabs-tab-active {
    color: #fff;
    background: #847ca3;
  }
  .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #fff;
    text-shadow: 0 0 0.25px currentcolor;
  }
  .ant-tabs-card.ant-tabs-top > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
  .ant-tabs-card.ant-tabs-bottom > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
  .ant-tabs-card.ant-tabs-top > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab,
  .ant-tabs-card.ant-tabs-bottom > div > .ant-tabs-nav .ant-tabs-tab + .ant-tabs-tab {
    margin: 0px;
  }
  .ant-tabs-top > .ant-tabs-nav,
  .ant-tabs-bottom > .ant-tabs-nav,
  .ant-tabs-top > div > .ant-tabs-nav,
  .ant-tabs-bottom > div > .ant-tabs-nav {
    margin: 0px;
  }
  .ant-tabs-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 12px 0;
    font-size: 14px;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    flex: 1;
    justify-content: center;
  }
`,
        SiderBar = function (props) {
          var _props$iconList = props.iconList,
            iconList = void 0 === _props$iconList ? default_icon_list.a : _props$iconList;
          return Object(jsx_runtime.jsx)(SiderBarWrapper, {
            children: Object(jsx_runtime.jsxs)(tabs.a, {
              type: 'card',
              centered: !0,
              children: [
                Object(jsx_runtime.jsx)(TabPane, { tab: 'Components', children: Object(jsx_runtime.jsx)(IconList, { iconList: iconList }) }, '1'),
                Object(jsx_runtime.jsx)(TabPane, { tab: 'Settings', children: Object(jsx_runtime.jsx)(SettingsContainer, {}) }, '2'),
                Object(jsx_runtime.jsx)(TabPane, { tab: 'Layers', children: Object(jsx_runtime.jsx)(LayersPanel, {}) }, '3'),
              ],
            }),
          });
        };
      (SiderBar.displayName = 'SiderBar'),
        (SiderBar.__docgenInfo = {
          description: '@class SiderBar\r\n\r\n侧边栏。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'SiderBar',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\SiderBar.jsx'] = {
            name: 'SiderBar',
            docgenInfo: SiderBar.__docgenInfo,
            path: 'src\\designer\\sider-bar\\SiderBar.jsx',
          });
      var MainContainer = styled_components_browser_esm.a.div`
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
  display: flex;
  padding: 0;
  margin: 0;

  .canvasArea {
    flex: 1;
    background-color: #f7f7f7;
    margin: 0;
  }

  .siderBar {
    width: 300px;
    height: calc(100vh - 44px);
    border-left: 1px solid #f0f0f0;
  }
`,
        emptyFn = function () {},
        defaultComponentTypes = {
          Element: esm.c,
          RootCanvasArea: RootCanvasArea,
          CButton: CButton.a,
          CRow: CRow.a,
          IconList: IconList,
          CText: CText.a,
          CColumn: CColumn.a,
          CImg: CImg.a,
          CVideo: CVideo.a,
          CIframe: CIframe.a,
          CChart: CChart.a,
        },
        CraftDesigner = function (props) {
          var _props$onPreview = props.onPreview,
            onPreview = void 0 === _props$onPreview ? emptyFn : _props$onPreview,
            _props$onDelete = props.onDelete,
            onDelete = void 0 === _props$onDelete ? emptyFn : _props$onDelete,
            _props$onUndo = props.onUndo,
            onUndo = void 0 === _props$onUndo ? emptyFn : _props$onUndo,
            _props$onRedo = props.onRedo,
            onRedo = void 0 === _props$onRedo ? emptyFn : _props$onRedo,
            _props$onSaveData = props.onSaveData,
            onSaveData = void 0 === _props$onSaveData ? emptyFn : _props$onSaveData,
            _props$onLoadData = props.onLoadData,
            onLoadData = void 0 === _props$onLoadData ? emptyFn : _props$onLoadData,
            _props$onHelp = props.onHelp,
            onHelp = void 0 === _props$onHelp ? emptyFn : _props$onHelp,
            _props$showNavBar = props.showNavBar,
            showNavBar = void 0 === _props$showNavBar || _props$showNavBar,
            _props$showSiderBar = props.showSiderBar,
            showSiderBar = void 0 === _props$showSiderBar || _props$showSiderBar,
            _props$componentTypes = props.componentTypes,
            componentTypes = void 0 === _props$componentTypes ? Object.assign({}, defaultComponentTypes) : _props$componentTypes,
            _props$iconList = props.iconList,
            iconList = void 0 === _props$iconList ? default_icon_list.a : _props$iconList,
            _props$pageData = props.pageData,
            pageData = void 0 === _props$pageData ? '' : _props$pageData,
            _props$enabled = props.enabled,
            enabled = void 0 === _props$enabled || _props$enabled;
          return Object(jsx_runtime.jsxs)(esm.b, {
            resolver: componentTypes,
            onRender: enabled
              ? RenderNode_RenderNode
              : function (_ref) {
                  var render = _ref.render;
                  return Object(jsx_runtime.jsx)(jsx_runtime.Fragment, { children: render });
                },
            enabled: enabled,
            children: [
              Object(jsx_runtime.jsx)(DataDeserializer, { pageData: pageData }),
              showNavBar
                ? Object(jsx_runtime.jsx)(NavBar, {
                    onPreview: onPreview,
                    onDelete: onDelete,
                    onUndo: onUndo,
                    onRedo: onRedo,
                    onSaveData: onSaveData,
                    onLoadData: onLoadData,
                    onHelp: onHelp,
                  })
                : Object(jsx_runtime.jsx)(jsx_runtime.Fragment, {}),
              Object(jsx_runtime.jsxs)(MainContainer, {
                className: 'page-container',
                children: [
                  Object(jsx_runtime.jsx)('div', {
                    className: classnames_default()(['canvasArea craftjs-renderer']),
                    children: Object(jsx_runtime.jsx)(lib.Scrollbars, {
                      autoHide: !0,
                      autoHideTimeout: 1e3,
                      autoHideDuration: 50,
                      autoHeight: !0,
                      autoHeightMin: 0,
                      autoHeightMax: 'calc(100vh - 44px)',
                      thumbMinSize: 30,
                      children: Object(jsx_runtime.jsx)(esm.d, { children: Object(jsx_runtime.jsx)(esm.c, { is: RootCanvasArea, canvas: !0 }) }),
                    }),
                  }),
                  showSiderBar
                    ? Object(jsx_runtime.jsx)('div', { className: 'siderBar', children: Object(jsx_runtime.jsx)(SiderBar, { iconList: iconList }) })
                    : Object(jsx_runtime.jsx)(jsx_runtime.Fragment, {}),
                ],
              }),
            ],
          });
        };
      (CraftDesigner.displayName = 'CraftDesigner'),
        (CraftDesigner.__docgenInfo = {
          description: '@class CraftDesigner\r\n\r\n设计器整体入口。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CraftDesigner',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\CraftDesigner.jsx'] = {
            name: 'CraftDesigner',
            docgenInfo: CraftDesigner.__docgenInfo,
            path: 'src\\designer\\CraftDesigner.jsx',
          });
    },
    './src/designer/editor-tools/RenderNode.css': function (module, exports, __webpack_require__) {
      var api = __webpack_require__('./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js'),
        content = __webpack_require__(
          './node_modules/css-loader/dist/cjs.js?!./node_modules/@storybook/builder-webpack4/node_modules/postcss-loader/dist/cjs.js?!./src/designer/editor-tools/RenderNode.css',
        );
      'string' == typeof (content = content.__esModule ? content.default : content) && (content = [[module.i, content, '']]);
      var options = { insert: 'head', singleton: !1 };
      api(content, options);
      module.exports = content.locals || {};
    },
    './src/designer/sider-bar/icon-list/Icon.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return Icon;
      });
      var _craftjs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        styled_components__WEBPACK_IMPORTED_MODULE_2__ =
          (__webpack_require__('./node_modules/react/index.js'),
          __webpack_require__('./node_modules/styled-components/dist/styled-components.browser.esm.js')),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        Wrapper = styled_components__WEBPACK_IMPORTED_MODULE_2__.a.div`
  width: 80px;
  height: 80px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid #8e8c93;
  text-align: center;
  background-color: #6e85b2;
  border-radius: 2px;
  cursor: move;
  div {
    width: 45px;
    height: 45px;
    margin: 0px 10px;
    overflow: hidden;
  }
  p {
    font-size: 12px;
    color: #fff;
    margin: 0;
    padding: 5px;
    text-align: center;
  }
`,
        Icon = function (props) {
          var connectors = Object(_craftjs_core__WEBPACK_IMPORTED_MODULE_0__.f)().connectors,
            icon = props.icon,
            label = props.label,
            component = props.component;
          return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(Wrapper, {
            ref: function (ref) {
              return connectors.create(ref, component);
            },
            children: [
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)('div', { children: icon }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)('p', { children: label }),
            ],
          });
        };
      (Icon.displayName = 'Icon'),
        (Icon.__docgenInfo = { description: '@class Icon\r\n可拖拽的图标\r\n\r\n@returns', methods: [], displayName: 'Icon' }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\icon-list\\Icon.jsx'] = {
            name: 'Icon',
            docgenInfo: Icon.__docgenInfo,
            path: 'src\\designer\\sider-bar\\icon-list\\Icon.jsx',
          });
    },
    './src/designer/sider-bar/icon-list/default-icon-list.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'b', function () {
        return iconStyle;
      }),
        __webpack_require__.d(__webpack_exports__, 'a', function () {
          return defaultIconList;
        });
      var _ant_design_icons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('./node_modules/@ant-design/icons/es/icons/FontSizeOutlined.js'),
        _ant_design_icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./node_modules/@ant-design/icons/es/icons/FileImageOutlined.js'),
        _ant_design_icons__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__('./node_modules/@ant-design/icons/es/icons/YoutubeOutlined.js'),
        _ant_design_icons__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__('./node_modules/@ant-design/icons/es/icons/FileOutlined.js'),
        _ant_design_icons__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__('./node_modules/@ant-design/icons/es/icons/AreaChartOutlined.js'),
        _craftjs_core__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        _assets_button_svg__WEBPACK_IMPORTED_MODULE_7__ =
          (__webpack_require__('./node_modules/react/index.js'), __webpack_require__('./src/assets/button.svg')),
        _assets_button_svg__WEBPACK_IMPORTED_MODULE_7___default = __webpack_require__.n(_assets_button_svg__WEBPACK_IMPORTED_MODULE_7__),
        _assets_column_1_svg__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__('./src/assets/column-1.svg'),
        _assets_column_1_svg__WEBPACK_IMPORTED_MODULE_8___default = __webpack_require__.n(_assets_column_1_svg__WEBPACK_IMPORTED_MODULE_8__),
        _assets_row_svg__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__('./src/assets/row.svg'),
        _assets_row_svg__WEBPACK_IMPORTED_MODULE_9___default = __webpack_require__.n(_assets_row_svg__WEBPACK_IMPORTED_MODULE_9__),
        _craft_components_basic_cbutton_CButton__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(
          './src/craft-components/basic/cbutton/CButton.jsx',
        ),
        _craft_components_basic_ciframe_CIframe__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__(
          './src/craft-components/basic/ciframe/CIframe.jsx',
        ),
        _craft_components_basic_cimg_CImg__WEBPACK_IMPORTED_MODULE_12__ = __webpack_require__('./src/craft-components/basic/cimg/CImg.jsx'),
        _craft_components_basic_ctext_CText__WEBPACK_IMPORTED_MODULE_13__ = __webpack_require__('./src/craft-components/basic/ctext/CText.jsx'),
        _craft_components_basic_cvideo_CVideo__WEBPACK_IMPORTED_MODULE_14__ = __webpack_require__('./src/craft-components/basic/cvideo/CVideo.jsx'),
        _craft_components_cchart_CChart__WEBPACK_IMPORTED_MODULE_15__ = __webpack_require__('./src/craft-components/cchart/CChart.jsx'),
        _craft_components_layout_ccolumn_CColumn__WEBPACK_IMPORTED_MODULE_16__ = __webpack_require__(
          './src/craft-components/layout/ccolumn/CColumn.jsx',
        ),
        _craft_components_layout_crow_CRow__WEBPACK_IMPORTED_MODULE_17__ = __webpack_require__('./src/craft-components/layout/crow/CRow.jsx'),
        _Icon__WEBPACK_IMPORTED_MODULE_18__ = __webpack_require__('./src/designer/sider-bar/icon-list/Icon.jsx'),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__ = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        iconStyle = { margin: 0, padding: 0, pointerEvents: 'none', color: '#fff', fontSize: 40 },
        defaultIconList = [
          Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_18__.a, {
            label: 'Text',
            icon: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_ant_design_icons__WEBPACK_IMPORTED_MODULE_0__.a, { style: iconStyle }),
            component: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(
              _craft_components_basic_ctext_CText__WEBPACK_IMPORTED_MODULE_13__.a,
              {},
            ),
          }),
          Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_18__.a, {
            label: 'Image',
            icon: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_ant_design_icons__WEBPACK_IMPORTED_MODULE_1__.a, { style: iconStyle }),
            component: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_craftjs_core__WEBPACK_IMPORTED_MODULE_5__.c, {
              is: _craft_components_basic_cimg_CImg__WEBPACK_IMPORTED_MODULE_12__.a,
              canvas: !0,
            }),
          }),
          Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_18__.a, {
            label: 'Video',
            icon: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_ant_design_icons__WEBPACK_IMPORTED_MODULE_2__.a, { style: iconStyle }),
            component: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_craftjs_core__WEBPACK_IMPORTED_MODULE_5__.c, {
              is: _craft_components_basic_cvideo_CVideo__WEBPACK_IMPORTED_MODULE_14__.a,
              canvas: !0,
            }),
          }),
          Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_18__.a, {
            label: 'IFrame',
            icon: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_ant_design_icons__WEBPACK_IMPORTED_MODULE_3__.a, { style: iconStyle }),
            component: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_craftjs_core__WEBPACK_IMPORTED_MODULE_5__.c, {
              is: _craft_components_basic_ciframe_CIframe__WEBPACK_IMPORTED_MODULE_11__.a,
              canvas: !0,
            }),
          }),
          Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_18__.a, {
            label: 'Chart',
            icon: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_ant_design_icons__WEBPACK_IMPORTED_MODULE_4__.a, { style: iconStyle }),
            component: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_craftjs_core__WEBPACK_IMPORTED_MODULE_5__.c, {
              is: _craft_components_cchart_CChart__WEBPACK_IMPORTED_MODULE_15__.a,
              canvas: !0,
            }),
          }),
          Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_18__.a, {
            label: 'Button',
            icon: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)('img', {
              width: '40px',
              height: '40px',
              style: iconStyle,
              alt: '',
              src: _assets_button_svg__WEBPACK_IMPORTED_MODULE_7___default.a,
            }),
            component: Object(
              react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx,
            )(_craft_components_basic_cbutton_CButton__WEBPACK_IMPORTED_MODULE_10__.a, { text: '按钮' }),
          }),
          Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_18__.a, {
            label: 'Row',
            icon: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)('img', {
              width: '40px',
              height: '40px',
              style: iconStyle,
              alt: '',
              src: _assets_row_svg__WEBPACK_IMPORTED_MODULE_9___default.a,
            }),
            component: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_craftjs_core__WEBPACK_IMPORTED_MODULE_5__.c, {
              is: _craft_components_layout_crow_CRow__WEBPACK_IMPORTED_MODULE_17__.a,
              canvas: !0,
            }),
          }),
          Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_Icon__WEBPACK_IMPORTED_MODULE_18__.a, {
            label: '1 Column',
            icon: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)('img', {
              width: '40px',
              height: '40px',
              style: iconStyle,
              alt: '',
              src: _assets_column_1_svg__WEBPACK_IMPORTED_MODULE_8___default.a,
            }),
            component: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_19__.jsx)(_craftjs_core__WEBPACK_IMPORTED_MODULE_5__.c, {
              is: _craft_components_layout_ccolumn_CColumn__WEBPACK_IMPORTED_MODULE_16__.a,
              canvas: !0,
            }),
          }),
        ];
    },
    './src/designer/sider-bar/settings/form-items/CBorder.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CBorder;
      });
      var _craftjs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        antd__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./node_modules/antd/es/select/index.js'),
        antd__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__('./node_modules/antd/es/row/index.js'),
        antd__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__('./node_modules/antd/es/col/index.js'),
        antd__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__('./node_modules/antd/es/input-number/index.js'),
        _CColorPicker__WEBPACK_IMPORTED_MODULE_6__ =
          (__webpack_require__('./node_modules/react/index.js'),
          __webpack_require__('./src/designer/sider-bar/settings/form-items/CColorPicker.jsx')),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        _excluded = ['onChange'];
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      var Option = antd__WEBPACK_IMPORTED_MODULE_1__.a.Option,
        CBorder = function (_ref) {
          var onChange = _ref.onChange,
            props = _objectWithoutProperties(_ref, _excluded),
            _useNode = Object(_craftjs_core__WEBPACK_IMPORTED_MODULE_0__.h)(function (node) {
              return { borderSize: node.data.props.borderSize, borderType: node.data.props.borderType };
            }),
            setProp = _useNode.actions.setProp,
            borderSize = _useNode.borderSize,
            borderType = _useNode.borderType,
            inputStyle = { width: '100%', marginBottom: '1px' };
          return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(antd__WEBPACK_IMPORTED_MODULE_2__.a, {
            children: [
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(antd__WEBPACK_IMPORTED_MODULE_3__.a, {
                span: 24,
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(antd__WEBPACK_IMPORTED_MODULE_4__.a, {
                  min: 0,
                  value: borderSize,
                  style: inputStyle,
                  onChange: function (val) {
                    setProp(function (props) {
                      props.borderSize = onChange ? onChange(val) : val;
                    }, 100);
                  },
                }),
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(antd__WEBPACK_IMPORTED_MODULE_3__.a, {
                span: 24,
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsxs)(antd__WEBPACK_IMPORTED_MODULE_1__.a, {
                  defaultValue: borderType,
                  value: borderType,
                  style: inputStyle,
                  onChange: function (val) {
                    setProp(function (props) {
                      props.borderType = onChange ? onChange(val) : val;
                    }, 100);
                  },
                  children: [
                    Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(Option, { value: 'solid', children: 'solid' }),
                    Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(Option, { value: 'dashed', children: 'dashed' }),
                  ],
                }),
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(antd__WEBPACK_IMPORTED_MODULE_3__.a, {
                span: 24,
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_7__.jsx)(
                  _CColorPicker__WEBPACK_IMPORTED_MODULE_6__.a,
                  Object.assign({}, props, { propKey: 'borderColor' }),
                ),
              }),
            ],
          });
        };
      (CBorder.displayName = 'CBorder'),
        (CBorder.__docgenInfo = {
          description:
            "@class CBorder\r\n\r\n用于修改 CSS  的 border 值。\r\n\r\nNOTE: {border:'1px solid rgba(32,32,32,1)'} 被拆分成了 3 个属性进行存储和操作，避免进行 CSS 字符串解析\r\n\r\n@author 3051813192@qq.com",
          methods: [],
          displayName: 'CBorder',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\settings\\form-items\\CBorder.jsx'] = {
            name: 'CBorder',
            docgenInfo: CBorder.__docgenInfo,
            path: 'src\\designer\\sider-bar\\settings\\form-items\\CBorder.jsx',
          });
    },
    './src/designer/sider-bar/settings/form-items/CColorPicker.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CColorPicker;
      });
      var _ant_design_icons__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('./node_modules/@ant-design/icons/es/icons/SkinFilled.js'),
        _craftjs_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        antd__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__('./node_modules/antd/es/input/index.js'),
        react__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__('./node_modules/react/index.js'),
        react_color__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__('./node_modules/react-color/es/index.js'),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        _excluded = ['propKey', 'onChange'];
      function _slicedToArray(arr, i) {
        return (
          (function _arrayWithHoles(arr) {
            if (Array.isArray(arr)) return arr;
          })(arr) ||
          (function _iterableToArrayLimit(arr, i) {
            var _i = null == arr ? null : ('undefined' != typeof Symbol && arr[Symbol.iterator]) || arr['@@iterator'];
            if (null == _i) return;
            var _s,
              _e,
              _arr = [],
              _n = !0,
              _d = !1;
            try {
              for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !i || _arr.length !== i); _n = !0);
            } catch (err) {
              (_d = !0), (_e = err);
            } finally {
              try {
                _n || null == _i.return || _i.return();
              } finally {
                if (_d) throw _e;
              }
            }
            return _arr;
          })(arr, i) ||
          (function _unsupportedIterableToArray(o, minLen) {
            if (!o) return;
            if ('string' == typeof o) return _arrayLikeToArray(o, minLen);
            var n = Object.prototype.toString.call(o).slice(8, -1);
            'Object' === n && o.constructor && (n = o.constructor.name);
            if ('Map' === n || 'Set' === n) return Array.from(o);
            if ('Arguments' === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
          })(arr, i) ||
          (function _nonIterableRest() {
            throw new TypeError(
              'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.',
            );
          })()
        );
      }
      function _arrayLikeToArray(arr, len) {
        (null == len || len > arr.length) && (len = arr.length);
        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
        return arr2;
      }
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      var CColorPicker = function (_ref) {
        var _ref$propKey = _ref.propKey,
          propKey = void 0 === _ref$propKey ? 'color' : _ref$propKey,
          onChange = _ref.onChange,
          props = _objectWithoutProperties(_ref, _excluded),
          _useNode = Object(_craftjs_core__WEBPACK_IMPORTED_MODULE_1__.h)(function (node) {
            return { propValue: node.data.props[propKey] };
          }),
          setProp = _useNode.actions.setProp,
          propValue = _useNode.propValue,
          _useState2 = _slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_3__.useState)(!1), 2),
          pickerVisable = _useState2[0],
          setPickerVisable = _useState2[1];
        return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.Fragment, {
          children: [
            Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(
              antd__WEBPACK_IMPORTED_MODULE_2__.a,
              Object.assign(
                {
                  addonAfter: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_ant_design_icons__WEBPACK_IMPORTED_MODULE_0__.a, {
                    style: { color: `rgba(${Object.values(propValue)})` },
                    onClick: function (evt) {
                      setPickerVisable(!pickerVisable);
                    },
                  }),
                  value: `rgba(${Object.values(propValue)})`,
                  onFocus: function (evt) {
                    setPickerVisable(!0);
                  },
                },
                props,
              ),
            ),
            pickerVisable
              ? Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)('div', {
                  tabIndex: '0',
                  hidefocus: 'true',
                  onFocus: function (evt) {},
                  onBlur: function (evt) {
                    setPickerVisable(!1);
                  },
                  style: { position: 'fixed', zIndex: 9999 },
                  children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(
                    react_color__WEBPACK_IMPORTED_MODULE_4__.a,
                    Object.assign(
                      {
                        color: propValue,
                        onChange: function (color) {
                          var rgb = color.rgb;
                          setProp(function (props) {
                            props[propKey] = onChange ? onChange(rgb) : rgb;
                          }, 100);
                        },
                      },
                      props,
                    ),
                  ),
                })
              : null,
          ],
        });
      };
      (CColorPicker.__docgenInfo = {
        description: '@class CColorPicker\r\n\r\n颜色选择器。\r\n\r\n用于 Settings 面板中，修改组件的各种属性。\r\n\r\n@author 3051813192@qq.com',
        methods: [],
        displayName: 'CColorPicker',
        props: { propKey: { defaultValue: { value: "'color'", computed: !1 }, required: !1 } },
      }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\settings\\form-items\\CColorPicker.jsx'] = {
            name: 'CColorPicker',
            docgenInfo: CColorPicker.__docgenInfo,
            path: 'src\\designer\\sider-bar\\settings\\form-items\\CColorPicker.jsx',
          });
    },
    './src/designer/sider-bar/settings/form-items/CInputNumber.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CInputNumber;
      });
      var _craftjs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        antd__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./node_modules/antd/es/input-number/index.js'),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ =
          (__webpack_require__('./node_modules/react/index.js'), __webpack_require__('./node_modules/react/jsx-runtime.js')),
        _excluded = ['propKey', 'onChange'];
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      var CInputNumber = function (_ref) {
        var _ref$propKey = _ref.propKey,
          propKey = void 0 === _ref$propKey ? 'fontSize' : _ref$propKey,
          onChange = _ref.onChange,
          props = _objectWithoutProperties(_ref, _excluded),
          _useNode = Object(_craftjs_core__WEBPACK_IMPORTED_MODULE_0__.h)(function (node) {
            return { propValue: node.data.props[propKey] };
          }),
          setProp = _useNode.actions.setProp,
          propValue = _useNode.propValue;
        return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(
          antd__WEBPACK_IMPORTED_MODULE_1__.a,
          Object.assign(
            {
              min: 1,
              max: 100,
              value: propValue,
              onChange: function (val) {
                setProp(function (props) {
                  props[propKey] = onChange ? onChange(val) : val;
                }, 100);
              },
              style: { width: '100%' },
            },
            props,
          ),
        );
      };
      (CInputNumber.displayName = 'CInputNumber'),
        (CInputNumber.__docgenInfo = {
          description: '@class CInputNumber\r\n\r\n数字输入框。\r\n\r\n用于 Settings 面板中，修改组件的各种属性。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CInputNumber',
          props: { propKey: { defaultValue: { value: "'fontSize'", computed: !1 }, required: !1 } },
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\settings\\form-items\\CInputNumber.jsx'] = {
            name: 'CInputNumber',
            docgenInfo: CInputNumber.__docgenInfo,
            path: 'src\\designer\\sider-bar\\settings\\form-items\\CInputNumber.jsx',
          });
    },
    './src/designer/sider-bar/settings/form-items/CMargin.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CMargin;
      });
      var _craftjs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        antd__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./node_modules/antd/es/row/index.js'),
        antd__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__('./node_modules/antd/es/col/index.js'),
        antd__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__('./node_modules/antd/es/input-number/index.js'),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__ =
          (__webpack_require__('./node_modules/react/index.js'), __webpack_require__('./node_modules/react/jsx-runtime.js')),
        _excluded = ['propKey', 'onChange'];
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      var CMargin = function (_ref) {
        var _ref$propKey = _ref.propKey,
          propKey = void 0 === _ref$propKey ? 'margin' : _ref$propKey,
          onChange = _ref.onChange,
          _useNode =
            (_objectWithoutProperties(_ref, _excluded),
            Object(_craftjs_core__WEBPACK_IMPORTED_MODULE_0__.h)(function (node) {
              return { propValue: node.data.props[propKey] };
            })),
          setProp = _useNode.actions.setProp,
          propValue = _useNode.propValue,
          labelStyle = { width: '50px', display: 'inline-block', fontSize: '12px', padding: '4px', textAlign: 'right' },
          inputStyle = { width: '80px', marginBottom: '1px' };
        return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(antd__WEBPACK_IMPORTED_MODULE_1__.a, {
          children: [
            Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(antd__WEBPACK_IMPORTED_MODULE_2__.a, {
              span: 12,
              children: [
                Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)('span', { style: labelStyle, children: 'top' }),
                Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(antd__WEBPACK_IMPORTED_MODULE_3__.a, {
                  min: 0,
                  value: propValue[0],
                  style: inputStyle,
                  onChange: function (val) {
                    setProp(function (props) {
                      props[propKey][0] = onChange ? onChange(val) : val;
                    }, 100);
                  },
                }),
              ],
            }),
            Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(antd__WEBPACK_IMPORTED_MODULE_2__.a, {
              span: 12,
              children: [
                Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)('span', { style: labelStyle, children: 'right' }),
                Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(antd__WEBPACK_IMPORTED_MODULE_3__.a, {
                  min: 0,
                  value: propValue[1],
                  style: inputStyle,
                  onChange: function (val) {
                    setProp(function (props) {
                      props[propKey][1] = onChange ? onChange(val) : val;
                    }, 100);
                  },
                }),
              ],
            }),
            Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(antd__WEBPACK_IMPORTED_MODULE_2__.a, {
              span: 12,
              children: [
                Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)('span', { style: labelStyle, children: 'bottom' }),
                Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(antd__WEBPACK_IMPORTED_MODULE_3__.a, {
                  min: 0,
                  value: propValue[2],
                  style: inputStyle,
                  onChange: function (val) {
                    setProp(function (props) {
                      props[propKey][2] = onChange ? onChange(val) : val;
                    }, 100);
                  },
                }),
              ],
            }),
            Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(antd__WEBPACK_IMPORTED_MODULE_2__.a, {
              span: 12,
              children: [
                Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)('span', { style: labelStyle, children: 'left' }),
                Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(antd__WEBPACK_IMPORTED_MODULE_3__.a, {
                  min: 0,
                  value: propValue[3],
                  style: inputStyle,
                  onChange: function (val) {
                    setProp(function (props) {
                      props[propKey][3] = onChange ? onChange(val) : val;
                    }, 100);
                  },
                }),
              ],
            }),
          ],
        });
      };
      (CMargin.displayName = 'CMargin'),
        (CMargin.__docgenInfo = {
          description:
            '@class CMargin\r\n\r\n用于修改 CSS  的 margin 值。\r\n\r\n用于 Settings 面板中，修改组件的各种属性。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CMargin',
          props: { propKey: { defaultValue: { value: "'margin'", computed: !1 }, required: !1 } },
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\settings\\form-items\\CMargin.jsx'] = {
            name: 'CMargin',
            docgenInfo: CMargin.__docgenInfo,
            path: 'src\\designer\\sider-bar\\settings\\form-items\\CMargin.jsx',
          });
    },
    './src/designer/sider-bar/settings/form-items/CTextInput.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CTextInput;
      });
      var _craftjs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        antd__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./node_modules/antd/es/input/index.js'),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ =
          (__webpack_require__('./node_modules/react/index.js'), __webpack_require__('./node_modules/react/jsx-runtime.js')),
        _excluded = ['propKey', 'onChange'];
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      var CTextInput = function (_ref) {
        var _ref$propKey = _ref.propKey,
          propKey = void 0 === _ref$propKey ? 'fontSize' : _ref$propKey,
          onChange = _ref.onChange,
          props = _objectWithoutProperties(_ref, _excluded),
          _useNode = Object(_craftjs_core__WEBPACK_IMPORTED_MODULE_0__.h)(function (node) {
            return { propValue: node.data.props[propKey] };
          }),
          setProp = _useNode.actions.setProp,
          propValue = _useNode.propValue;
        return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(
          antd__WEBPACK_IMPORTED_MODULE_1__.a,
          Object.assign(
            {
              value: propValue,
              onChange: function (evt) {
                var val = evt.target.value;
                setProp(function (props) {
                  props[propKey] = onChange ? onChange(val) : val;
                }, 100);
              },
            },
            props,
          ),
        );
      };
      (CTextInput.displayName = 'CTextInput'),
        (CTextInput.__docgenInfo = {
          description: '@class CTextInput\r\n\r\n文本框。\r\n\r\n用于 Settings 面板中，修改组件的各种属性。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CTextInput',
          props: { propKey: { defaultValue: { value: "'fontSize'", computed: !1 }, required: !1 } },
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['src\\designer\\sider-bar\\settings\\form-items\\CTextInput.jsx'] = {
            name: 'CTextInput',
            docgenInfo: CTextInput.__docgenInfo,
            path: 'src\\designer\\sider-bar\\settings\\form-items\\CTextInput.jsx',
          });
    },
    './stories sync recursive ^\\.(?:(?:^|[\\\\/]|(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/])(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$': function (
      module,
      exports,
      __webpack_require__,
    ) {
      var map = { './0-craftjs-codeless-designer.stories.tsx': './stories/0-craftjs-codeless-designer.stories.tsx' };
      function webpackContext(req) {
        var id = webpackContextResolve(req);
        return __webpack_require__(id);
      }
      function webpackContextResolve(req) {
        if (!__webpack_require__.o(map, req)) {
          var e = new Error("Cannot find module '" + req + "'");
          throw ((e.code = 'MODULE_NOT_FOUND'), e);
        }
        return map[req];
      }
      (webpackContext.keys = function webpackContextKeys() {
        return Object.keys(map);
      }),
        (webpackContext.resolve = webpackContextResolve),
        (module.exports = webpackContext),
        (webpackContext.id =
          './stories sync recursive ^\\.(?:(?:^|[\\\\/]|(?:(?:(?!(?:^|[\\\\/])\\.).)*?)[\\\\/])(?!\\.)(?=.)[^\\\\/]*?\\.stories\\.(js|jsx|ts|tsx|mdx))$');
    },
    './stories/0-craftjs-codeless-designer.stories.tsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.r(__webpack_exports__),
        function (module) {
          var _storybook_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('./node_modules/@storybook/react/dist/esm/client/index.js'),
            react__WEBPACK_IMPORTED_MODULE_2__ =
              (__webpack_require__('./node_modules/antd/dist/antd.css'), __webpack_require__('./node_modules/react/index.js')),
            react__WEBPACK_IMPORTED_MODULE_2___default = __webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_2__),
            _api_API__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__('./stories/api/API.jsx'),
            _custom_component_CustomComponent__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__('./stories/custom-component/CustomComponent.jsx'),
            _custom_navbar_CustomNavbar__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__('./stories/custom-navbar/CustomNavbar.jsx'),
            _custom_settings_CustomSettings__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__('./stories/custom-settings/CustomSettings.jsx'),
            _custom_siderbar_CustomSiderbar__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__('./stories/custom-siderbar/CustomSiderbar.jsx'),
            _preview_page_PreviewPage__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__('./stories/preview-page/PreviewPage.jsx'),
            _quick_start_QuickStart__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__('./stories/quick-start/QuickStart.jsx'),
            _save_and_load_SaveAndLoad__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__('./stories/save-and-load/SaveAndLoad.jsx'),
            react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__ = __webpack_require__('./node_modules/react/jsx-runtime.js');
          Object(_storybook_react__WEBPACK_IMPORTED_MODULE_0__.storiesOf)('Craft-Codeless-Designer', module)
            .add('1.快速上手', function () {
              return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(react__WEBPACK_IMPORTED_MODULE_2___default.a.StrictMode, {
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_quick_start_QuickStart__WEBPACK_IMPORTED_MODULE_9__.a, {}),
              });
            })
            .add('2.预览页面', function () {
              return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(react__WEBPACK_IMPORTED_MODULE_2___default.a.StrictMode, {
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_preview_page_PreviewPage__WEBPACK_IMPORTED_MODULE_8__.a, {}),
              });
            })
            .add('3.自定义组件', function () {
              return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(react__WEBPACK_IMPORTED_MODULE_2___default.a.StrictMode, {
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(
                  _custom_component_CustomComponent__WEBPACK_IMPORTED_MODULE_4__.a,
                  {},
                ),
              });
            })
            .add('4.组件对应的 Settings', function () {
              return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(react__WEBPACK_IMPORTED_MODULE_2___default.a.StrictMode, {
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(
                  _custom_settings_CustomSettings__WEBPACK_IMPORTED_MODULE_6__.a,
                  {},
                ),
              });
            })
            .add('5.存储和加载页面', function () {
              return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(react__WEBPACK_IMPORTED_MODULE_2___default.a.StrictMode, {
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_save_and_load_SaveAndLoad__WEBPACK_IMPORTED_MODULE_10__.a, {}),
              });
            })
            .add('6.自定义顶部导航', function () {
              return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(react__WEBPACK_IMPORTED_MODULE_2___default.a.StrictMode, {
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_custom_navbar_CustomNavbar__WEBPACK_IMPORTED_MODULE_5__.a, {}),
              });
            })
            .add('7.自定义侧边工具栏', function () {
              return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(react__WEBPACK_IMPORTED_MODULE_2___default.a.StrictMode, {
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(
                  _custom_siderbar_CustomSiderbar__WEBPACK_IMPORTED_MODULE_7__.a,
                  {},
                ),
              });
            })
            .add('8.API', function () {
              return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(react__WEBPACK_IMPORTED_MODULE_2___default.a.StrictMode, {
                children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_11__.jsx)(_api_API__WEBPACK_IMPORTED_MODULE_3__.a, {}),
              });
            });
        }.call(this, __webpack_require__('./node_modules/webpack/buildin/harmony-module.js')(module));
    },
    './stories/api/API.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return API;
      });
      __webpack_require__('./node_modules/react/index.js');
      var react_markdown__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./node_modules/react-markdown/lib/react-markdown.js'),
        remark_gfm__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__('./node_modules/remark-gfm/index.js'),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        API = function (props) {
          return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment, {
            children: Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(react_markdown__WEBPACK_IMPORTED_MODULE_1__.a, {
              remarkPlugins: [remark_gfm__WEBPACK_IMPORTED_MODULE_2__.a],
              children:
                '\n# API\n\n**CraftDesinger 是最核心的组件，它集成了所有功能。**\n\nCraftDesinger 核心 props 说明：\n\n| props | 说明 |\n| - | - |\n| onPreview | 预览按钮回调函数 | \n| onDelete | 删除按钮回调函数 | \n| onUndo | Undo 按钮回调函数 | \n| onRedo | Redo 按钮回调函数 | \n| onSaveData | 保存 按钮回调函数 |  \n| onLoadData | 加载 按钮回调函数 | \n| onHelp | Help 按钮回调函数| \n| showNavBar | 是否渲染顶部导航条，默认为 true |   \n| showSiderBar | 是否渲染侧边工具栏，默认为 true | \n| componentTypes | 组件类型列表， CraftDesigner 内置的组件已经全部添加在列表中  | \n| iconList | 组件图标列表， CraftDesigner 内置的图标已经全部添加在列表中 | \n| pageData | 页面数据，传递和修改 pageData 会触发 CraftDesigner 重新渲染页面 | \n| enabled | 是否启用编辑状态，默认为 true ，如果需要进入预览状态，请把此配置项设置为 false | \n\n',
            }),
          });
        };
      (API.__docgenInfo = { description: '', methods: [], displayName: 'API' }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\api\\API.jsx'] = { name: 'API', docgenInfo: API.__docgenInfo, path: 'stories\\api\\API.jsx' });
    },
    './stories/custom-component/CustomComponent.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CustomComponent;
      });
      var UnorderedListOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/UnorderedListOutlined.js'),
        esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        message = __webpack_require__('./node_modules/antd/es/message/index.js'),
        react_markdown =
          (__webpack_require__('./node_modules/react/index.js'), __webpack_require__('./node_modules/react-markdown/lib/react-markdown.js')),
        prism = __webpack_require__('./node_modules/react-syntax-highlighter/dist/esm/prism.js'),
        javascript = __webpack_require__('./node_modules/react-syntax-highlighter/dist/esm/languages/prism/javascript.js'),
        remark_gfm = __webpack_require__('./node_modules/remark-gfm/index.js'),
        CraftDesigner = __webpack_require__('./src/designer/CraftDesigner.jsx'),
        default_icon_list = __webpack_require__('./src/designer/sider-bar/icon-list/default-icon-list.jsx'),
        Icon = __webpack_require__('./src/designer/sider-bar/icon-list/Icon.jsx'),
        card = __webpack_require__('./node_modules/antd/es/card/index.js'),
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        MyComponent = function (props) {
          return Object(jsx_runtime.jsx)(jsx_runtime.Fragment, {
            children: Object(jsx_runtime.jsxs)(card.a, {
              title: 'Default size card',
              extra: Object(jsx_runtime.jsx)('a', { href: '#', children: 'More' }),
              style: { width: 300 },
              children: [
                Object(jsx_runtime.jsx)('p', { children: 'Card content' }),
                Object(jsx_runtime.jsx)('p', { children: 'Card content' }),
                Object(jsx_runtime.jsx)('p', { children: 'Card content' }),
              ],
            }),
          });
        };
      (MyComponent.__docgenInfo = {
        description: '与编写普通的 React 组件完全一致。\r\n\r\n@param {*} props\r\n@returns',
        methods: [],
        displayName: 'MyComponent',
      }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\custom-component\\MyComponent.jsx'] = {
            name: 'MyComponent',
            docgenInfo: MyComponent.__docgenInfo,
            path: 'stories\\custom-component\\MyComponent.jsx',
          });
      var defaultProps = {
          minHeight: 40,
          margin: [0, 0, 0, 0],
          padding: [10, 10, 10, 10],
          borderSize: 1,
          borderType: 'solid',
          borderColor: { r: 32, g: 32, b: 32, a: 1 },
          display: 'flex',
          bgColor: { r: 200, g: 200, b: 200, a: 1 },
        },
        CMyComponent = function (props) {
          var _props = (props = Object.assign({}, defaultProps, props)),
            minHeight = _props.minHeight,
            margin = _props.margin,
            padding = _props.padding,
            borderSize = _props.borderSize,
            borderType = _props.borderType,
            borderColor = _props.borderColor,
            bgColor = _props.bgColor,
            display = _props.display,
            _useNode$connectors = (_props.children, Object(esm.h)().connectors),
            connect = _useNode$connectors.connect;
          _useNode$connectors.drag;
          return Object(jsx_runtime.jsx)('div', {
            ref: connect,
            style: {
              margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
              padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
              border: `${borderSize}px ${borderType} rgba(${Object.values(borderColor)})`,
              minHeight: `${minHeight}px`,
              display: display,
              backgroundColor: `rgba(${Object.values(bgColor)})`,
            },
            children: Object(jsx_runtime.jsx)(MyComponent, {}),
          });
        };
      (CMyComponent.displayName = 'CMyComponent'),
        (CMyComponent.craft = { displayName: 'CMyComponent', props: defaultProps }),
        (CMyComponent.__docgenInfo = {
          description:
            '@class CMyComponent\r\n\r\n写一个包装组件来包装 MyComponent 组件，一般用 C 作为前缀，表示这是一个 Craft 包装组件。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CMyComponent',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\custom-component\\CMyComponent.jsx'] = {
            name: 'CMyComponent',
            docgenInfo: CMyComponent.__docgenInfo,
            path: 'stories\\custom-component\\CMyComponent.jsx',
          });
      var _excluded = ['node', 'inline', 'className', 'children'],
        _excluded2 = ['node', 'inline', 'className', 'children'],
        _excluded3 = ['node', 'inline', 'className', 'children'];
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      function _toConsumableArray(arr) {
        return (
          (function _arrayWithoutHoles(arr) {
            if (Array.isArray(arr)) return _arrayLikeToArray(arr);
          })(arr) ||
          (function _iterableToArray(iter) {
            if (('undefined' != typeof Symbol && null != iter[Symbol.iterator]) || null != iter['@@iterator']) return Array.from(iter);
          })(arr) ||
          (function _unsupportedIterableToArray(o, minLen) {
            if (!o) return;
            if ('string' == typeof o) return _arrayLikeToArray(o, minLen);
            var n = Object.prototype.toString.call(o).slice(8, -1);
            'Object' === n && o.constructor && (n = o.constructor.name);
            if ('Map' === n || 'Set' === n) return Array.from(o);
            if ('Arguments' === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
          })(arr) ||
          (function _nonIterableSpread() {
            throw new TypeError(
              'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.',
            );
          })()
        );
      }
      function _arrayLikeToArray(arr, len) {
        (null == len || len > arr.length) && (len = arr.length);
        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
        return arr2;
      }
      var CustomComponent = function (props) {
        var componentTypes = Object.assign({}, CraftDesigner.b, { CMyComponent: CMyComponent }),
          iconList = [].concat(_toConsumableArray(default_icon_list.a), [
            Object(jsx_runtime.jsx)(Icon.a, {
              label: 'MyComponent',
              icon: Object(jsx_runtime.jsx)(UnorderedListOutlined.a, { style: default_icon_list.b }),
              component: Object(jsx_runtime.jsx)(esm.c, { is: CMyComponent, canvas: !0 }),
            }),
          ]);
        return Object(jsx_runtime.jsxs)(jsx_runtime.Fragment, {
          children: [
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(react_markdown.a, {
              remarkPlugins: [remark_gfm.a],
              children:
                '\n# 📝自定义组件\n## 1.自定义组件的步骤：\n- 第一步：编写一个普通的 React 组件，或者引入开源组件库中的组件。\n- 第二步：编写一个 Craft 包装组件，用来包装普通的 React 组件，并暴露给 Editor。\n- 第三步：给组件编写一个可拖拽的图标。\n- 第四步：给组件编写对应的 Settings 面板。\n\n**此文档描述第一步到第三步，第四步在下一节单独描述。**\n',
            }),
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(react_markdown.a, {
              remarkPlugins: [remark_gfm.a],
              children: '\n## 2.运行效果（右侧列表中的 MyComponent 是自定义组件)：\n',
            }),
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(CraftDesigner.a, {
              componentTypes: componentTypes,
              iconList: iconList,
              onSaveData: function (jsonStr) {
                window.localStorage.setItem('test-data', JSON.stringify(jsonStr)), message.b.success('Data saved to window.localStorage.');
              },
              onLoadData: function (evt) {
                var testData = window.localStorage.getItem('test-data');
                return testData ? (testData = JSON.parse(testData)) : (console.error('There is no data in window.localStorage.'), null);
              },
            }),
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(react_markdown.a, {
              children:
                '# 3.MyComponent 组件的代码：\n\n~~~js\nimport { Card } from \'antd\';\nimport React from \'react\';\n\n/**\n * 与编写普通的 React 组件完全一致。\n *\n * @param {*} props\n * @returns\n */\nexport const MyComponent = props => {\n  return (\n    <>\n      <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>\n        <p>Card content</p>\n        <p>Card content</p>\n        <p>Card content</p>\n      </Card>\n    </>\n  );\n};\n~~~\n',
              components: {
                code: function (_ref) {
                  _ref.node;
                  var inline = _ref.inline,
                    className = _ref.className,
                    children = _ref.children,
                    props = _objectWithoutProperties(_ref, _excluded),
                    match = /language-(\w+)/.exec(className || '');
                  return !inline && match
                    ? Object(jsx_runtime.jsx)(
                        prism.a,
                        Object.assign(
                          { children: String(children).replace(/\n$/, ''), style: javascript.dark, language: match[1], PreTag: 'div' },
                          props,
                        ),
                      )
                    : Object(jsx_runtime.jsx)('code', Object.assign({ className: className }, props, { children: children }));
                },
              },
            }),
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(react_markdown.a, {
              children:
                "# 4.包装组件 CMyComponent 的代码：\n\n~~~js\nimport { useNode } from '@craftjs/core';\nimport React from 'react';\nimport { MyComponent } from './MyComponent';\n\nconst defaultProps = {\n  minHeight: 40,\n  margin: [0, 0, 0, 0],\n  padding: [10, 10, 10, 10],\n  //NOTE: {border:'1px solid rgba(32,32,32,1)'} 被拆分成了 3 个属性进行存储和操作，避免进行 CSS 字符串解析\n  borderSize: 1,\n  borderType: 'solid',\n  borderColor: { r: 32, g: 32, b: 32, a: 1 },\n  display: 'flex',\n  bgColor: { r: 200, g: 200, b: 200, a: 1 },\n};\n\n/**\n * @class CMyComponent\n *\n * 写一个包装组件来包装 MyComponent 组件，一般用 C 作为前缀，表示这是一个 Craft 包装组件。\n *\n * @author 3051813192@qq.com\n */\nexport const CMyComponent = props => {\n  props = {\n    ...defaultProps,\n    ...props,\n  };\n\n  const { minHeight, margin, padding, borderSize, borderType, borderColor, bgColor, display, children } = props;\n  const {\n    connectors: { connect, drag },\n  } = useNode();\n\n  return (\n    <div\n      ref={connect}\n      // 这里需要根据 props 中传递的参数重新拼接 CSS 样式\n      style={{\n        margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,\n        padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,\n        border: `${borderSize}px ${borderType} rgba(${Object.values(borderColor)})`,\n        minHeight: `${minHeight}px`,\n        display,\n        backgroundColor: `rgba(${Object.values(bgColor)})`,\n      }}\n    >\n      {/* 把普通的 MyComponent 组件包装起来。 */}\n      <MyComponent></MyComponent>\n    </div>\n  );\n};\n\nCMyComponent.craft = {\n  displayName: 'CMyComponent',\n  props: defaultProps,\n};\n~~~\n",
              components: {
                code: function (_ref2) {
                  _ref2.node;
                  var inline = _ref2.inline,
                    className = _ref2.className,
                    children = _ref2.children,
                    props = _objectWithoutProperties(_ref2, _excluded2),
                    match = /language-(\w+)/.exec(className || '');
                  return !inline && match
                    ? Object(jsx_runtime.jsx)(
                        prism.a,
                        Object.assign(
                          { children: String(children).replace(/\n$/, ''), style: javascript.dark, language: match[1], PreTag: 'div' },
                          props,
                        ),
                      )
                    : Object(jsx_runtime.jsx)('code', Object.assign({ className: className }, props, { children: children }));
                },
              },
            }),
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(react_markdown.a, {
              children:
                '# 3.把包装组件的类型以及对应的图标传递给 CraftEditor ：\n\n~~~js\n//对于自定义的组件，需要把组件本身的构造函数引用传递进去，这样 Editor 才能识别组件的类型。\n//CCD 内置的组件类型一般都要传递进去。\n//类型传递进去，但是不使用不会造成副作用。\nconst componentTypes = { ...defaultComponentTypes, CMyComponent };\n\n//对于自定义的组件，需要定义一个图标放在侧边栏的图标列表中，\n//CCD 内置的图标列表也需要传递进去。\n//如果不想要 CCD 内置的图标列表，可以不传 defaultIconList\nconst iconList = [\n  ...defaultIconList,\n  <Icon label="MyComponent" icon={<UnorderedListOutlined style={iconStyle} />} component={<Element is={CMyComponent} canvas></Element>}></Icon>,\n];\n~~~\n',
              components: {
                code: function (_ref3) {
                  _ref3.node;
                  var inline = _ref3.inline,
                    className = _ref3.className,
                    children = _ref3.children,
                    props = _objectWithoutProperties(_ref3, _excluded3),
                    match = /language-(\w+)/.exec(className || '');
                  return !inline && match
                    ? Object(jsx_runtime.jsx)(
                        prism.a,
                        Object.assign(
                          { children: String(children).replace(/\n$/, ''), style: javascript.dark, language: match[1], PreTag: 'div' },
                          props,
                        ),
                      )
                    : Object(jsx_runtime.jsx)('code', Object.assign({ className: className }, props, { children: children }));
                },
              },
            }),
          ],
        });
      };
      (CustomComponent.__docgenInfo = { description: '', methods: [], displayName: 'CustomComponent' }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\custom-component\\CustomComponent.jsx'] = {
            name: 'CustomComponent',
            docgenInfo: CustomComponent.__docgenInfo,
            path: 'stories\\custom-component\\CustomComponent.jsx',
          });
    },
    './stories/custom-navbar/CustomNavbar.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CustomNavbar;
      });
      __webpack_require__('./node_modules/react/index.js');
      var _src_designer_CraftDesigner__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./src/designer/CraftDesigner.jsx'),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        CustomNavbar = function (props) {
          return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment, {
            children: [
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('h1', { children: '自定义顶部导航条' }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('h3', { children: '1.隐藏顶部导航条' }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('p', {
                children: '在 CraftDesigner 标签上设置 showNavBar 为 false 可以隐藏导航条（不是隐藏状态，而是完全不渲染组件）。',
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('p', { children: '<CraftDesigner showNavBar={false}>' }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_src_designer_CraftDesigner__WEBPACK_IMPORTED_MODULE_1__.a, {
                showNavBar: !1,
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('h3', { children: '2.自定义顶部导航条' }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('p', {
                children:
                  '请参考 CraftDesigner 内置的 NavBar 组件的写法，自己编写导航条，然后与设计器整合起来使用， https://github.com/Craft-Codeless-Designer/Craft-Codeless-Designer',
              }),
            ],
          });
        };
      (CustomNavbar.__docgenInfo = { description: '', methods: [], displayName: 'CustomNavbar' }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\custom-navbar\\CustomNavbar.jsx'] = {
            name: 'CustomNavbar',
            docgenInfo: CustomNavbar.__docgenInfo,
            path: 'stories\\custom-navbar\\CustomNavbar.jsx',
          });
    },
    './stories/custom-settings/CustomSettings.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CustomSettings;
      });
      var UnorderedListOutlined = __webpack_require__('./node_modules/@ant-design/icons/es/icons/UnorderedListOutlined.js'),
        esm = __webpack_require__('./node_modules/@craftjs/core/dist/esm/index.js'),
        message = __webpack_require__('./node_modules/antd/es/message/index.js'),
        react_markdown =
          (__webpack_require__('./node_modules/react/index.js'), __webpack_require__('./node_modules/react-markdown/lib/react-markdown.js')),
        prism = __webpack_require__('./node_modules/react-syntax-highlighter/dist/esm/prism.js'),
        javascript = __webpack_require__('./node_modules/react-syntax-highlighter/dist/esm/languages/prism/javascript.js'),
        remark_gfm = __webpack_require__('./node_modules/remark-gfm/index.js'),
        CraftDesigner = __webpack_require__('./src/designer/CraftDesigner.jsx'),
        default_icon_list = __webpack_require__('./src/designer/sider-bar/icon-list/default-icon-list.jsx'),
        Icon = __webpack_require__('./src/designer/sider-bar/icon-list/Icon.jsx'),
        es_form = __webpack_require__('./node_modules/antd/es/form/index.js'),
        CBorder = __webpack_require__('./src/designer/sider-bar/settings/form-items/CBorder.jsx'),
        CColorPicker = __webpack_require__('./src/designer/sider-bar/settings/form-items/CColorPicker.jsx'),
        CMargin = __webpack_require__('./src/designer/sider-bar/settings/form-items/CMargin.jsx'),
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        CMyComponentSettings = function (props) {
          return Object(jsx_runtime.jsxs)(es_form.a, {
            layout: 'vertical',
            children: [
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Border',
                children: Object(jsx_runtime.jsx)(CBorder.a, Object.assign({}, props, { propKey: 'border' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Background Color',
                children: Object(jsx_runtime.jsx)(CColorPicker.a, Object.assign({}, props, { propKey: 'bgColor' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Margin',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'margin' })),
              }),
              Object(jsx_runtime.jsx)(es_form.a.Item, {
                label: 'Padding',
                children: Object(jsx_runtime.jsx)(CMargin.a, Object.assign({}, props, { propKey: 'padding' })),
              }),
            ],
          });
        };
      (CMyComponentSettings.displayName = 'CMyComponentSettings'),
        (CMyComponentSettings.__docgenInfo = {
          description: '@class CMyComponentSettings\r\n\r\nMyComponent 对应的属性配置面板。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CMyComponentSettings',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\custom-settings\\CMyComponentSettings.jsx'] = {
            name: 'CMyComponentSettings',
            docgenInfo: CMyComponentSettings.__docgenInfo,
            path: 'stories\\custom-settings\\CMyComponentSettings.jsx',
          });
      var card = __webpack_require__('./node_modules/antd/es/card/index.js'),
        MyComponent = function (props) {
          return Object(jsx_runtime.jsx)(jsx_runtime.Fragment, {
            children: Object(jsx_runtime.jsxs)(card.a, {
              title: 'Default size card',
              extra: Object(jsx_runtime.jsx)('a', { href: '#', children: 'More' }),
              style: { width: 300 },
              children: [
                Object(jsx_runtime.jsx)('p', { children: 'Card content' }),
                Object(jsx_runtime.jsx)('p', { children: 'Card content' }),
                Object(jsx_runtime.jsx)('p', { children: 'Card content' }),
              ],
            }),
          });
        };
      (MyComponent.__docgenInfo = {
        description: '与编写普通的 React 组件完全一致。\r\n\r\n@param {*} props\r\n@returns',
        methods: [],
        displayName: 'MyComponent',
      }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\custom-settings\\MyComponent.jsx'] = {
            name: 'MyComponent',
            docgenInfo: MyComponent.__docgenInfo,
            path: 'stories\\custom-settings\\MyComponent.jsx',
          });
      var defaultProps = {
          minHeight: 40,
          margin: [0, 0, 0, 0],
          padding: [10, 10, 10, 10],
          borderSize: 1,
          borderType: 'solid',
          borderColor: { r: 32, g: 32, b: 32, a: 1 },
          display: 'flex',
          bgColor: { r: 200, g: 200, b: 200, a: 1 },
        },
        CMyComponent = function (props) {
          var _props = (props = Object.assign({}, defaultProps, props)),
            minHeight = _props.minHeight,
            margin = _props.margin,
            padding = _props.padding,
            borderSize = _props.borderSize,
            borderType = _props.borderType,
            borderColor = _props.borderColor,
            bgColor = _props.bgColor,
            display = _props.display,
            _useNode$connectors = (_props.children, Object(esm.h)().connectors),
            connect = _useNode$connectors.connect;
          _useNode$connectors.drag;
          return Object(jsx_runtime.jsx)('div', {
            ref: connect,
            style: {
              margin: `${margin[0]}px ${margin[1]}px ${margin[2]}px ${margin[3]}px`,
              padding: `${padding[0]}px ${padding[1]}px ${padding[2]}px ${padding[3]}px`,
              border: `${borderSize}px ${borderType} rgba(${Object.values(borderColor)})`,
              minHeight: `${minHeight}px`,
              display: display,
              backgroundColor: `rgba(${Object.values(bgColor)})`,
            },
            children: Object(jsx_runtime.jsx)(MyComponent, {}),
          });
        };
      (CMyComponent.displayName = 'CMyComponent'),
        (CMyComponent.craft = { displayName: 'CMyComponent', props: defaultProps, related: { toolbar: CMyComponentSettings } }),
        (CMyComponent.__docgenInfo = {
          description:
            '@class CMyComponent\r\n\r\n写一个包装组件来包装 MyComponent 组件，一般用 C 作为前缀，表示这是一个 Craft 包装组件。\r\n\r\n@author 3051813192@qq.com',
          methods: [],
          displayName: 'CMyComponent',
        }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\custom-settings\\CMyComponent.jsx'] = {
            name: 'CMyComponent',
            docgenInfo: CMyComponent.__docgenInfo,
            path: 'stories\\custom-settings\\CMyComponent.jsx',
          });
      var _excluded = ['node', 'inline', 'className', 'children'],
        _excluded2 = ['node', 'inline', 'className', 'children'];
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      function _toConsumableArray(arr) {
        return (
          (function _arrayWithoutHoles(arr) {
            if (Array.isArray(arr)) return _arrayLikeToArray(arr);
          })(arr) ||
          (function _iterableToArray(iter) {
            if (('undefined' != typeof Symbol && null != iter[Symbol.iterator]) || null != iter['@@iterator']) return Array.from(iter);
          })(arr) ||
          (function _unsupportedIterableToArray(o, minLen) {
            if (!o) return;
            if ('string' == typeof o) return _arrayLikeToArray(o, minLen);
            var n = Object.prototype.toString.call(o).slice(8, -1);
            'Object' === n && o.constructor && (n = o.constructor.name);
            if ('Map' === n || 'Set' === n) return Array.from(o);
            if ('Arguments' === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
          })(arr) ||
          (function _nonIterableSpread() {
            throw new TypeError(
              'Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.',
            );
          })()
        );
      }
      function _arrayLikeToArray(arr, len) {
        (null == len || len > arr.length) && (len = arr.length);
        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
        return arr2;
      }
      var CustomSettings = function (props) {
        var componentTypes = Object.assign({}, CraftDesigner.b, { CMyComponent: CMyComponent }),
          iconList = [].concat(_toConsumableArray(default_icon_list.a), [
            Object(jsx_runtime.jsx)(Icon.a, {
              label: 'MyComponent',
              icon: Object(jsx_runtime.jsx)(UnorderedListOutlined.a, { style: default_icon_list.b }),
              component: Object(jsx_runtime.jsx)(esm.c, { is: CMyComponent, canvas: !0 }),
            }),
          ]);
        return Object(jsx_runtime.jsxs)(jsx_runtime.Fragment, {
          children: [
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(react_markdown.a, {
              remarkPlugins: [remark_gfm.a],
              children: '# 🛠️组件对应的 Settings\n\n**此文档描述自定义组件的第四步，自定义组件的属性配置面板。**\n\n## 1.编写 Settings 面板\n',
            }),
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(react_markdown.a, {
              children:
                '\n\n~~~js\nimport { Form } from \'antd\';\nimport React from \'react\';\nimport { CBorder } from \'../../src/designer/sider-bar/settings/form-items/CBorder\';\nimport { CColorPicker } from \'../../src/designer/sider-bar/settings/form-items/CColorPicker\';\nimport { CMargin } from \'../../src/designer/sider-bar/settings/form-items/CMargin\';\n\n/**\n * @class CMyComponentSettings\n *\n * MyComponent 对应的属性配置面板。\n *\n * @author 3051813192@qq.com\n */\nexport const CMyComponentSettings = props => {\n  return (\n    <Form layout="vertical">\n      <Form.Item label="Border">\n        <CBorder {...props} propKey="border"></CBorder>\n      </Form.Item>\n      <Form.Item label="Background Color">\n        <CColorPicker {...props} propKey="bgColor"></CColorPicker>\n      </Form.Item>\n      <Form.Item label="Margin">\n        <CMargin {...props} propKey="margin"></CMargin>\n      </Form.Item>\n      <Form.Item label="Padding">\n        <CMargin {...props} propKey="padding"></CMargin>\n      </Form.Item>\n    </Form>\n  );\n};\n~~~\n',
              components: {
                code: function (_ref) {
                  _ref.node;
                  var inline = _ref.inline,
                    className = _ref.className,
                    children = _ref.children,
                    props = _objectWithoutProperties(_ref, _excluded),
                    match = /language-(\w+)/.exec(className || '');
                  return !inline && match
                    ? Object(jsx_runtime.jsx)(
                        prism.a,
                        Object.assign(
                          { children: String(children).replace(/\n$/, ''), style: javascript.dark, language: match[1], PreTag: 'div' },
                          props,
                        ),
                      )
                    : Object(jsx_runtime.jsx)('code', Object.assign({ className: className }, props, { children: children }));
                },
              },
            }),
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(react_markdown.a, { remarkPlugins: [remark_gfm.a], children: '\n## 2.在 MyComponent 中关联配置面板：\n' }),
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(react_markdown.a, {
              children:
                "\n\n~~~js\n//省略相同的代码...\n\nCMyComponent.craft = {\n  displayName: 'CMyComponent',\n  props: defaultProps,\n  related: {\n    toolbar: CMyComponentSettings, //这里关联对应的配置面板，当组件被选中时，Craft 会获取到对应的类型。\n  },\n};\n\n//省略相同的代码...\n~~~\n",
              components: {
                code: function (_ref2) {
                  _ref2.node;
                  var inline = _ref2.inline,
                    className = _ref2.className,
                    children = _ref2.children,
                    props = _objectWithoutProperties(_ref2, _excluded2),
                    match = /language-(\w+)/.exec(className || '');
                  return !inline && match
                    ? Object(jsx_runtime.jsx)(
                        prism.a,
                        Object.assign(
                          { children: String(children).replace(/\n$/, ''), style: javascript.dark, language: match[1], PreTag: 'div' },
                          props,
                        ),
                      )
                    : Object(jsx_runtime.jsx)('code', Object.assign({ className: className }, props, { children: children }));
                },
              },
            }),
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(react_markdown.a, {
              remarkPlugins: [remark_gfm.a],
              children:
                '\n## 3.最终效果：\n\n**请把 MyComponent 拖拽到设计区，然后选中它，查看右侧对应的 Settings 。**\n**如果需要给 MyComponent 加上更多的配置项，包括带有具体业务信息的配置项，直接修改它的配置面板组件即可， Craft 会把修改之后的值同步到组件的 props 上（在 Craft 底层实际上是在修改组件对应的 Node 数据结构，然后触发 React 重新渲染组件）。**\n',
            }),
            Object(jsx_runtime.jsx)('br', {}),
            Object(jsx_runtime.jsx)(CraftDesigner.a, {
              componentTypes: componentTypes,
              iconList: iconList,
              onSaveData: function (jsonStr) {
                window.localStorage.setItem('test-data', JSON.stringify(jsonStr)), message.b.success('Data saved to window.localStorage.');
              },
              onLoadData: function (evt) {
                var testData = window.localStorage.getItem('test-data');
                return testData ? (testData = JSON.parse(testData)) : (console.error('There is no data in window.localStorage.'), null);
              },
            }),
          ],
        });
      };
      (CustomSettings.__docgenInfo = { description: '', methods: [], displayName: 'CustomSettings' }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\custom-settings\\CustomSettings.jsx'] = {
            name: 'CustomSettings',
            docgenInfo: CustomSettings.__docgenInfo,
            path: 'stories\\custom-settings\\CustomSettings.jsx',
          });
    },
    './stories/custom-siderbar/CustomSiderbar.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return CustomSiderBar;
      });
      __webpack_require__('./node_modules/react/index.js');
      var _src_designer_CraftDesigner__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./src/designer/CraftDesigner.jsx'),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        CustomSiderBar = function (props) {
          return Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment, {
            children: [
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('h1', { children: '自定义侧边栏' }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('h3', { children: '1.隐藏侧边栏' }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('p', {
                children: '在 CraftDesigner 标签上设置 showSiderBar 为 false ，将不会渲染侧边栏组件（不是隐藏状态，而是完全不渲染组件）。',
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('p', { children: '<CraftDesigner showSiderBar={false}>' }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_src_designer_CraftDesigner__WEBPACK_IMPORTED_MODULE_1__.a, {
                showSiderBar: !1,
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('h3', { children: '2.自定义侧边栏' }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)('p', {
                children:
                  '请参考 CraftDesigner 内置的 SiderBar 组件的写法，自己编写导航条，然后与设计器整合起来使用， https://github.com/Craft-Codeless-Designer/Craft-Codeless-Designer',
              }),
            ],
          });
        };
      (CustomSiderBar.__docgenInfo = { description: '', methods: [], displayName: 'CustomSiderBar' }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\custom-siderbar\\CustomSiderbar.jsx'] = {
            name: 'CustomSiderBar',
            docgenInfo: CustomSiderBar.__docgenInfo,
            path: 'stories\\custom-siderbar\\CustomSiderbar.jsx',
          });
    },
    './stories/preview-page/PreviewPage.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return PreviewPage;
      });
      var antd__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('./node_modules/antd/es/message/index.js'),
        react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./node_modules/react/index.js'),
        react_markdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__('./node_modules/react-markdown/lib/react-markdown.js'),
        react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__('./node_modules/react-syntax-highlighter/dist/esm/prism.js'),
        react_syntax_highlighter_dist_esm_languages_prism_javascript__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(
          './node_modules/react-syntax-highlighter/dist/esm/languages/prism/javascript.js',
        ),
        remark_gfm__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__('./node_modules/remark-gfm/index.js'),
        _src_designer_CraftDesigner__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__('./src/designer/CraftDesigner.jsx'),
        _quick_start_test_page_data__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__('./stories/quick-start/test-page-data.js'),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        _excluded = ['node', 'inline', 'className', 'children'];
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      function _slicedToArray(arr, i) {
        return (
          (function _arrayWithHoles(arr) {
            if (Array.isArray(arr)) return arr;
          })(arr) ||
          (function _iterableToArrayLimit(arr, i) {
            var _i = null == arr ? null : ('undefined' != typeof Symbol && arr[Symbol.iterator]) || arr['@@iterator'];
            if (null == _i) return;
            var _s,
              _e,
              _arr = [],
              _n = !0,
              _d = !1;
            try {
              for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !i || _arr.length !== i); _n = !0);
            } catch (err) {
              (_d = !0), (_e = err);
            } finally {
              try {
                _n || null == _i.return || _i.return();
              } finally {
                if (_d) throw _e;
              }
            }
            return _arr;
          })(arr, i) ||
          (function _unsupportedIterableToArray(o, minLen) {
            if (!o) return;
            if ('string' == typeof o) return _arrayLikeToArray(o, minLen);
            var n = Object.prototype.toString.call(o).slice(8, -1);
            'Object' === n && o.constructor && (n = o.constructor.name);
            if ('Map' === n || 'Set' === n) return Array.from(o);
            if ('Arguments' === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
          })(arr, i) ||
          (function _nonIterableRest() {
            throw new TypeError(
              'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.',
            );
          })()
        );
      }
      function _arrayLikeToArray(arr, len) {
        (null == len || len > arr.length) && (len = arr.length);
        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
        return arr2;
      }
      var PreviewPage = function (props) {
        var _useState2 = _slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), 2),
          pageData = _useState2[0],
          setPageData = _useState2[1];
        return (
          Object(react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
            setPageData(_quick_start_test_page_data__WEBPACK_IMPORTED_MODULE_7__.a);
          }, []),
          Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.Fragment, {
            children: [
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(react_markdown__WEBPACK_IMPORTED_MODULE_2__.a, {
                remarkPlugins: [remark_gfm__WEBPACK_IMPORTED_MODULE_5__.a],
                children:
                  '# 👨‍💻预览页面\n## 1.注意点\n- 把 CraftDesigner 的 enabled 设置为 false 会禁用所有编辑功能，此时只展示，不能编辑。          \n- 把 CraftDesigner 的 showNavBar 和 showSiderBar 设置为 false ，将不会渲染顶部的导航条和侧边工具栏。\n- 关于 Editor 的更多参数，请参考 craftjs 官方文档： https://craft.js.org/docs/api/editor ',
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_src_designer_CraftDesigner__WEBPACK_IMPORTED_MODULE_6__.a, {
                enabled: !1,
                pageData: pageData,
                onSaveData: function (jsonStr) {
                  window.localStorage.setItem('test-data', JSON.stringify(jsonStr)),
                    antd__WEBPACK_IMPORTED_MODULE_0__.b.success('Data saved to window.localStorage.');
                },
                onLoadData: function (evt) {
                  var testData = window.localStorage.getItem('test-data');
                  if (!testData) return console.error('There is no data in window.localStorage.'), null;
                  (testData = JSON.parse(testData)), setPageData(testData);
                },
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(react_markdown__WEBPACK_IMPORTED_MODULE_2__.a, {
                children:
                  "# 2.此例子的代码\n\n~~~js\nexport const PreviewPage = props => {\n  const [pageData, setPageData] = useState('');\n\n  useEffect(() => {\n    //TODO:在真实的业务系统中，这里会从 Server 端接口加载页面，参见 Craft-Codeless-Designer-demo 项目。\n    setPageData(testPageData);\n  }, []);\n\n  return (\n    <>\n      <CraftDesigner\n        enabled={false} //enabled 设置为 false ，可以禁用所有编辑功能，此时仅仅渲染出页面。\n        pageData={pageData} // 传递初始数据，格式为 JSON\n        //点击顶部导航条上的保存按钮时，会回调此函数\n        onSaveData={jsonStr => {\n          //FIXME:handle empty string.\n          window.localStorage.setItem('test-data', JSON.stringify(jsonStr));\n          message.success('Data saved to window.localStorage.');\n        }}\n        //点击顶部导航条上的加载按钮时，会回调此函数\n        onLoadData={evt => {\n          let testData = window.localStorage.getItem('test-data');\n          if (!testData) {\n            console.error('There is no data in window.localStorage.');\n            return null;\n          }\n          testData = JSON.parse(testData);\n          setPageData(testData);\n        }}\n      ></CraftDesigner>\n    </>\n  );\n};\n~~~\n",
                components: {
                  code: function (_ref) {
                    _ref.node;
                    var inline = _ref.inline,
                      className = _ref.className,
                      children = _ref.children,
                      props = _objectWithoutProperties(_ref, _excluded),
                      match = /language-(\w+)/.exec(className || '');
                    return !inline && match
                      ? Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(
                          react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3__.a,
                          Object.assign(
                            {
                              children: String(children).replace(/\n$/, ''),
                              style: react_syntax_highlighter_dist_esm_languages_prism_javascript__WEBPACK_IMPORTED_MODULE_4__.dark,
                              language: match[1],
                              PreTag: 'div',
                            },
                            props,
                          ),
                        )
                      : Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(
                          'code',
                          Object.assign({ className: className }, props, { children: children }),
                        );
                  },
                },
              }),
            ],
          })
        );
      };
      (PreviewPage.__docgenInfo = { description: '', methods: [], displayName: 'PreviewPage' }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\preview-page\\PreviewPage.jsx'] = {
            name: 'PreviewPage',
            docgenInfo: PreviewPage.__docgenInfo,
            path: 'stories\\preview-page\\PreviewPage.jsx',
          });
    },
    './stories/quick-start/QuickStart.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return QuickStart;
      });
      var antd__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__('./node_modules/antd/es/message/index.js'),
        react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__('./node_modules/react/index.js'),
        react_markdown__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__('./node_modules/react-markdown/lib/react-markdown.js'),
        react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__('./node_modules/react-syntax-highlighter/dist/esm/prism.js'),
        react_syntax_highlighter_dist_esm_languages_prism_javascript__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(
          './node_modules/react-syntax-highlighter/dist/esm/languages/prism/javascript.js',
        ),
        remark_gfm__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__('./node_modules/remark-gfm/index.js'),
        _src_designer_CraftDesigner__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__('./src/designer/CraftDesigner.jsx'),
        _test_page_data__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__('./stories/quick-start/test-page-data.js'),
        react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__('./node_modules/react/jsx-runtime.js'),
        _excluded = ['node', 'inline', 'className', 'children'];
      function _objectWithoutProperties(source, excluded) {
        if (null == source) return {};
        var key,
          i,
          target = (function _objectWithoutPropertiesLoose(source, excluded) {
            if (null == source) return {};
            var key,
              i,
              target = {},
              sourceKeys = Object.keys(source);
            for (i = 0; i < sourceKeys.length; i++) (key = sourceKeys[i]), excluded.indexOf(key) >= 0 || (target[key] = source[key]);
            return target;
          })(source, excluded);
        if (Object.getOwnPropertySymbols) {
          var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
          for (i = 0; i < sourceSymbolKeys.length; i++)
            (key = sourceSymbolKeys[i]),
              excluded.indexOf(key) >= 0 || (Object.prototype.propertyIsEnumerable.call(source, key) && (target[key] = source[key]));
        }
        return target;
      }
      function _slicedToArray(arr, i) {
        return (
          (function _arrayWithHoles(arr) {
            if (Array.isArray(arr)) return arr;
          })(arr) ||
          (function _iterableToArrayLimit(arr, i) {
            var _i = null == arr ? null : ('undefined' != typeof Symbol && arr[Symbol.iterator]) || arr['@@iterator'];
            if (null == _i) return;
            var _s,
              _e,
              _arr = [],
              _n = !0,
              _d = !1;
            try {
              for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !i || _arr.length !== i); _n = !0);
            } catch (err) {
              (_d = !0), (_e = err);
            } finally {
              try {
                _n || null == _i.return || _i.return();
              } finally {
                if (_d) throw _e;
              }
            }
            return _arr;
          })(arr, i) ||
          (function _unsupportedIterableToArray(o, minLen) {
            if (!o) return;
            if ('string' == typeof o) return _arrayLikeToArray(o, minLen);
            var n = Object.prototype.toString.call(o).slice(8, -1);
            'Object' === n && o.constructor && (n = o.constructor.name);
            if ('Map' === n || 'Set' === n) return Array.from(o);
            if ('Arguments' === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
          })(arr, i) ||
          (function _nonIterableRest() {
            throw new TypeError(
              'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.',
            );
          })()
        );
      }
      function _arrayLikeToArray(arr, len) {
        (null == len || len > arr.length) && (len = arr.length);
        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
        return arr2;
      }
      var QuickStart = function (props) {
        var _useState2 = _slicedToArray(Object(react__WEBPACK_IMPORTED_MODULE_1__.useState)(''), 2),
          pageData = _useState2[0],
          setPageData = _useState2[1];
        return (
          Object(react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(function () {
            setPageData(_test_page_data__WEBPACK_IMPORTED_MODULE_7__.a);
          }, []),
          Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.Fragment, {
            children: [
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(react_markdown__WEBPACK_IMPORTED_MODULE_2__.a, {
                remarkPlugins: [remark_gfm__WEBPACK_IMPORTED_MODULE_5__.a],
                children:
                  '# 🚀快速上手\n## 1.CraftDesinger 的主要特性\n- CraftDesinger 是一个普通的 React 组件，只是功能比较复杂，所有编辑功能都集成在这个组件里面。           \n- CraftDesinger 由3个区域构成：顶部导航条、主画布区域、右侧边栏。 \n- CraftDesigner 可以像一个普通的 React 组件一样被嵌入在任意组件中，但是由于它的功能比较复杂，建议弹出新的浏览器窗口来使用它。这是一个完整功能的示例项目： https://github.com/Craft-Codeless-Designer/Craft-Codeless-Designer-demo\n- 内部的组件也可以拆开使用。 \n- 顶部套航条可以隐藏起来，也可以编写自己的导航条。 \n- 侧边栏可以隐藏起来，也可以编写自己的侧边栏。',
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(_src_designer_CraftDesigner__WEBPACK_IMPORTED_MODULE_6__.a, {
                pageData: pageData,
                onSaveData: function (jsonStr) {
                  window.localStorage.setItem('test-data', JSON.stringify(jsonStr)),
                    antd__WEBPACK_IMPORTED_MODULE_0__.b.success('Data saved to window.localStorage.');
                },
                onLoadData: function (evt) {
                  var testData = window.localStorage.getItem('test-data');
                  if (!testData) return console.error('There is no data in window.localStorage.'), null;
                  (testData = JSON.parse(testData)), setPageData(testData);
                },
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)('br', {}),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(react_markdown__WEBPACK_IMPORTED_MODULE_2__.a, {
                children:
                  "## 2.此例子的代码\n\n~~~js\nexport const QuickStart = props => {\n  const [pageData, setPageData] = useState('');\n\n  useEffect(() => {\n    //TODO:在真实的业务系统中，这里会从 Server 端接口加载页面，参见 Craft-Codeless-Designer-demo 项目。\n    setPageData(testPageData);\n  }, []);\n\n  return (\n    <>\n      {/* CraftDesigner 自身是一个普通的 React 组件，它的用法与普通的 React 组件没有差异，只是它的外观和功能比较复杂。 */}\n      <CraftDesigner\n        pageData={pageData} // 传递初始数据，格式为 JSON\n        //点击顶部导航条上的保存按钮时，会回调此函数\n        onSaveData={jsonStr => {\n          //FIXME:handle empty string.\n          window.localStorage.setItem('test-data', JSON.stringify(jsonStr));\n          message.success('Data saved to window.localStorage.');\n        }}\n        //点击顶部导航条上的加载按钮时，会回调此函数\n        onLoadData={evt => {\n          let testData = window.localStorage.getItem('test-data');\n          if (!testData) {\n            console.error('There is no data in window.localStorage.');\n            return null;\n          }\n          testData = JSON.parse(testData);\n          setPageData(testData);\n        }}\n      ></CraftDesigner>\n    </>\n  );\n};\n~~~\n\n源代码： https://github.com/Craft-Codeless-Designer/Craft-Codeless-Designer \n",
                components: {
                  code: function (_ref) {
                    _ref.node;
                    var inline = _ref.inline,
                      className = _ref.className,
                      children = _ref.children,
                      props = _objectWithoutProperties(_ref, _excluded),
                      match = /language-(\w+)/.exec(className || '');
                    return !inline && match
                      ? Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(
                          react_syntax_highlighter__WEBPACK_IMPORTED_MODULE_3__.a,
                          Object.assign(
                            {
                              children: String(children).replace(/\n$/, ''),
                              style: react_syntax_highlighter_dist_esm_languages_prism_javascript__WEBPACK_IMPORTED_MODULE_4__.dark,
                              language: match[1],
                              PreTag: 'div',
                            },
                            props,
                          ),
                        )
                      : Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)(
                          'code',
                          Object.assign({ className: className }, props, { children: children }),
                        );
                  },
                },
              }),
              Object(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_8__.jsx)('br', {}),
            ],
          })
        );
      };
      (QuickStart.__docgenInfo = { description: '', methods: [], displayName: 'QuickStart' }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\quick-start\\QuickStart.jsx'] = {
            name: 'QuickStart',
            docgenInfo: QuickStart.__docgenInfo,
            path: 'stories\\quick-start\\QuickStart.jsx',
          });
    },
    './stories/quick-start/test-page-data.js': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return testPageData;
      });
      var testPageData = {
        ROOT: {
          type: { resolvedName: 'RootCanvasArea' },
          isCanvas: !0,
          props: {},
          displayName: 'RootCanvasArea',
          custom: {},
          hidden: !1,
          nodes: ['2G8d043avz', '7wgWlhcoKe', 'IMnFFF8cQy', 'bLqDMdAwMf', 'gKuarZ-R4b'],
          linkedNodes: {},
        },
        bLqDMdAwMf: {
          type: { resolvedName: 'CRow' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'solid',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            display: 'flex',
            bgColor: { r: 200, g: 200, b: 200, a: 1 },
          },
          displayName: 'CRow',
          custom: {},
          parent: 'ROOT',
          hidden: !1,
          nodes: ['tOLXpZl6Lj', 'FEqGl7p1V4'],
          linkedNodes: {},
        },
        tOLXpZl6Lj: {
          type: { resolvedName: 'CColumn' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            width: -1,
            flex: 1,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'dashed',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'CColumn',
          custom: {},
          parent: 'bLqDMdAwMf',
          hidden: !1,
          nodes: ['0vVQ2urYwl'],
          linkedNodes: {},
        },
        FEqGl7p1V4: {
          type: { resolvedName: 'CColumn' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            width: -1,
            flex: 1,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'dashed',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'CColumn',
          custom: {},
          parent: 'bLqDMdAwMf',
          hidden: !1,
          nodes: ['HIpX69i6VK'],
          linkedNodes: {},
        },
        IMnFFF8cQy: {
          type: { resolvedName: 'CRow' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'solid',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            display: 'flex',
            bgColor: { r: 200, g: 200, b: 200, a: 1 },
          },
          displayName: 'CRow',
          custom: {},
          parent: 'ROOT',
          hidden: !1,
          nodes: ['pHOSWGTqp0'],
          linkedNodes: {},
        },
        pHOSWGTqp0: {
          type: { resolvedName: 'CColumn' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            width: -1,
            flex: 1,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'dashed',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'CColumn',
          custom: {},
          parent: 'IMnFFF8cQy',
          hidden: !1,
          nodes: ['bK8btHneqA'],
          linkedNodes: {},
        },
        bK8btHneqA: {
          type: { resolvedName: 'CImg' },
          isCanvas: !0,
          props: {
            src:
              '',
            alt: '',
            height: 200,
            minHeight: 200,
            width: 400,
            maxWidth: '100%',
            margin: [0, 0, 0, 0],
            padding: [0, 0, 0, 0],
            borderSize: 0,
            borderType: 'solid',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'Image',
          custom: {},
          parent: 'pHOSWGTqp0',
          hidden: !1,
          nodes: [],
          linkedNodes: {},
        },
        '0vVQ2urYwl': {
          type: { resolvedName: 'CText' },
          isCanvas: !1,
          props: {
            fontSize: '15',
            textAlign: 'left',
            fontWeight: '500',
            color: { r: 92, g: 90, b: 90, a: 1 },
            margin: [0, 0, 0, 0],
            padding: [0, 0, 0, 0],
            shadow: 0,
            text: 'Text',
          },
          displayName: 'Text',
          custom: {},
          parent: 'tOLXpZl6Lj',
          hidden: !1,
          nodes: [],
          linkedNodes: {},
        },
        HIpX69i6VK: {
          type: { resolvedName: 'CText' },
          isCanvas: !1,
          props: {
            fontSize: '15',
            textAlign: 'left',
            fontWeight: '500',
            color: { r: 92, g: 90, b: 90, a: 1 },
            margin: [0, 0, 0, 0],
            padding: [0, 0, 0, 0],
            shadow: 0,
            text: 'Text',
          },
          displayName: 'Text',
          custom: {},
          parent: 'FEqGl7p1V4',
          hidden: !1,
          nodes: [],
          linkedNodes: {},
        },
        'gKuarZ-R4b': {
          type: { resolvedName: 'CRow' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'solid',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            display: 'flex',
            bgColor: { r: 200, g: 200, b: 200, a: 1 },
          },
          displayName: 'CRow',
          custom: {},
          parent: 'ROOT',
          hidden: !1,
          nodes: ['nqprxZG25C'],
          linkedNodes: {},
        },
        nqprxZG25C: {
          type: { resolvedName: 'CColumn' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            width: -1,
            flex: 1,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'dashed',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'CColumn',
          custom: {},
          parent: 'gKuarZ-R4b',
          hidden: !1,
          nodes: ['mM4KdVql80'],
          linkedNodes: {},
        },
        mM4KdVql80: {
          type: { resolvedName: 'CIframe' },
          isCanvas: !0,
          props: {
            src: 'https://map.baidu.com/@13225221.26,3748918.53,12z',
            alt: 'MDN',
            height: 300,
            minHeight: 200,
            width: 400,
            maxWidth: '100%',
            margin: [0, 0, 0, 0],
            padding: [0, 0, 0, 0],
            borderSize: 0,
            borderType: 'solid',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'Iframe',
          custom: {},
          parent: 'nqprxZG25C',
          hidden: !1,
          nodes: [],
          linkedNodes: {},
        },
        '7wgWlhcoKe': {
          type: { resolvedName: 'CRow' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'solid',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            display: 'flex',
            bgColor: { r: 200, g: 200, b: 200, a: 1 },
          },
          displayName: 'CRow',
          custom: {},
          parent: 'ROOT',
          hidden: !1,
          nodes: ['HoV6EeSpYG'],
          linkedNodes: {},
        },
        HoV6EeSpYG: {
          type: { resolvedName: 'CColumn' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            width: -1,
            flex: 1,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'dashed',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'CColumn',
          custom: {},
          parent: '7wgWlhcoKe',
          hidden: !1,
          nodes: ['S5b-bYwRrM'],
          linkedNodes: {},
        },
        'S5b-bYwRrM': {
          type: { resolvedName: 'CVideo' },
          isCanvas: !0,
          props: {
            src: 'https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4',
            poster: 'https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217',
            alt: '',
            controls: !0,
            height: 300,
            minHeight: 200,
            width: 400,
            maxWidth: '100%',
            margin: [0, 0, 0, 0],
            padding: [0, 0, 0, 0],
            borderSize: 0,
            borderType: 'solid',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'Video',
          custom: {},
          parent: 'HoV6EeSpYG',
          hidden: !1,
          nodes: [],
          linkedNodes: {},
        },
        '2G8d043avz': {
          type: { resolvedName: 'CRow' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'solid',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            display: 'flex',
            bgColor: { r: 200, g: 200, b: 200, a: 1 },
          },
          displayName: 'CRow',
          custom: {},
          parent: 'ROOT',
          hidden: !1,
          nodes: ['UjPPN7uO6m', 'lJej-VLlrM', 'OtlUEN3DKc', 'N1F8Qm65nd'],
          linkedNodes: {},
        },
        UjPPN7uO6m: {
          type: { resolvedName: 'CColumn' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            width: -1,
            flex: 1,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'dashed',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'CColumn',
          custom: {},
          parent: '2G8d043avz',
          hidden: !1,
          nodes: ['O4j_BFOHf9'],
          linkedNodes: {},
        },
        OtlUEN3DKc: {
          type: { resolvedName: 'CColumn' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            width: -1,
            flex: 1,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'dashed',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'CColumn',
          custom: {},
          parent: '2G8d043avz',
          hidden: !1,
          nodes: ['flo3Z4ohEf'],
          linkedNodes: {},
        },
        flo3Z4ohEf: {
          type: { resolvedName: 'CText' },
          isCanvas: !1,
          props: {
            fontSize: '15',
            textAlign: 'left',
            fontWeight: '500',
            color: { r: 92, g: 90, b: 90, a: 1 },
            margin: [0, 0, 0, 0],
            padding: [0, 0, 0, 0],
            shadow: 0,
            text: 'Text',
          },
          displayName: 'Text',
          custom: {},
          parent: 'OtlUEN3DKc',
          hidden: !1,
          nodes: [],
          linkedNodes: {},
        },
        O4j_BFOHf9: {
          type: { resolvedName: 'CText' },
          isCanvas: !1,
          props: {
            fontSize: '15',
            textAlign: 'left',
            fontWeight: '500',
            color: { r: 92, g: 90, b: 90, a: 1 },
            margin: [0, 0, 0, 0],
            padding: [0, 0, 0, 0],
            shadow: 0,
            text: 'Text',
          },
          displayName: 'Text',
          custom: {},
          parent: 'UjPPN7uO6m',
          hidden: !1,
          nodes: [],
          linkedNodes: {},
        },
        'lJej-VLlrM': {
          type: { resolvedName: 'CColumn' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            width: -1,
            flex: 1,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'dashed',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'CColumn',
          custom: {},
          parent: '2G8d043avz',
          hidden: !1,
          nodes: ['wpSB-EEX1j'],
          linkedNodes: {},
        },
        'wpSB-EEX1j': {
          type: { resolvedName: 'CText' },
          isCanvas: !1,
          props: {
            fontSize: '15',
            textAlign: 'left',
            fontWeight: '500',
            color: { r: 92, g: 90, b: 90, a: 1 },
            margin: [0, 0, 0, 0],
            padding: [0, 0, 0, 0],
            shadow: 0,
            text: 'Text',
          },
          displayName: 'Text',
          custom: {},
          parent: 'lJej-VLlrM',
          hidden: !1,
          nodes: [],
          linkedNodes: {},
        },
        N1F8Qm65nd: {
          type: { resolvedName: 'CColumn' },
          isCanvas: !0,
          props: {
            minHeight: 40,
            width: -1,
            flex: 1,
            margin: [0, 0, 0, 0],
            padding: [10, 10, 10, 10],
            borderSize: 1,
            borderType: 'dashed',
            borderColor: { r: 32, g: 32, b: 32, a: 1 },
            bgColor: { r: 250, g: 250, b: 250, a: 1 },
          },
          displayName: 'CColumn',
          custom: {},
          parent: '2G8d043avz',
          hidden: !1,
          nodes: ['7sipSof43d'],
          linkedNodes: {},
        },
        '7sipSof43d': {
          type: { resolvedName: 'CText' },
          isCanvas: !1,
          props: {
            fontSize: '15',
            textAlign: 'left',
            fontWeight: '500',
            color: { r: 92, g: 90, b: 90, a: 1 },
            margin: [0, 0, 0, 0],
            padding: [0, 0, 0, 0],
            shadow: 0,
            text: 'Text',
          },
          displayName: 'Text',
          custom: {},
          parent: 'N1F8Qm65nd',
          hidden: !1,
          nodes: [],
          linkedNodes: {},
        },
      };
    },
    './stories/save-and-load/SaveAndLoad.jsx': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.d(__webpack_exports__, 'a', function () {
        return SaveAndLoad;
      });
      var message = __webpack_require__('./node_modules/antd/es/message/index.js'),
        react = __webpack_require__('./node_modules/react/index.js'),
        react_markdown = __webpack_require__('./node_modules/react-markdown/lib/react-markdown.js'),
        remark_gfm = __webpack_require__('./node_modules/remark-gfm/index.js'),
        CraftDesigner = __webpack_require__('./src/designer/CraftDesigner.jsx'),
        testPageData = {
          ROOT: {
            type: { resolvedName: 'RootCanvasArea' },
            isCanvas: !0,
            props: {},
            displayName: 'RootCanvasArea',
            custom: {},
            hidden: !1,
            nodes: ['2G8d043avz', '7wgWlhcoKe', 'IMnFFF8cQy', 'bLqDMdAwMf', 'gKuarZ-R4b'],
            linkedNodes: {},
          },
          bLqDMdAwMf: {
            type: { resolvedName: 'CRow' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'solid',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              display: 'flex',
              bgColor: { r: 200, g: 200, b: 200, a: 1 },
            },
            displayName: 'CRow',
            custom: {},
            parent: 'ROOT',
            hidden: !1,
            nodes: ['tOLXpZl6Lj', 'FEqGl7p1V4'],
            linkedNodes: {},
          },
          tOLXpZl6Lj: {
            type: { resolvedName: 'CColumn' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              width: -1,
              flex: 1,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'dashed',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'CColumn',
            custom: {},
            parent: 'bLqDMdAwMf',
            hidden: !1,
            nodes: ['0vVQ2urYwl'],
            linkedNodes: {},
          },
          FEqGl7p1V4: {
            type: { resolvedName: 'CColumn' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              width: -1,
              flex: 1,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'dashed',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'CColumn',
            custom: {},
            parent: 'bLqDMdAwMf',
            hidden: !1,
            nodes: ['HIpX69i6VK'],
            linkedNodes: {},
          },
          IMnFFF8cQy: {
            type: { resolvedName: 'CRow' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'solid',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              display: 'flex',
              bgColor: { r: 200, g: 200, b: 200, a: 1 },
            },
            displayName: 'CRow',
            custom: {},
            parent: 'ROOT',
            hidden: !1,
            nodes: ['pHOSWGTqp0'],
            linkedNodes: {},
          },
          pHOSWGTqp0: {
            type: { resolvedName: 'CColumn' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              width: -1,
              flex: 1,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'dashed',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'CColumn',
            custom: {},
            parent: 'IMnFFF8cQy',
            hidden: !1,
            nodes: ['bK8btHneqA'],
            linkedNodes: {},
          },
          bK8btHneqA: {
            type: { resolvedName: 'CImg' },
            isCanvas: !0,
            props: {
              src:
                '',
              alt: '',
              height: 200,
              minHeight: 200,
              width: 400,
              maxWidth: '100%',
              margin: [0, 0, 0, 0],
              padding: [0, 0, 0, 0],
              borderSize: 0,
              borderType: 'solid',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'Image',
            custom: {},
            parent: 'pHOSWGTqp0',
            hidden: !1,
            nodes: [],
            linkedNodes: {},
          },
          '0vVQ2urYwl': {
            type: { resolvedName: 'CText' },
            isCanvas: !1,
            props: {
              fontSize: '15',
              textAlign: 'left',
              fontWeight: '500',
              color: { r: 92, g: 90, b: 90, a: 1 },
              margin: [0, 0, 0, 0],
              padding: [0, 0, 0, 0],
              shadow: 0,
              text: 'Text',
            },
            displayName: 'Text',
            custom: {},
            parent: 'tOLXpZl6Lj',
            hidden: !1,
            nodes: [],
            linkedNodes: {},
          },
          HIpX69i6VK: {
            type: { resolvedName: 'CText' },
            isCanvas: !1,
            props: {
              fontSize: '15',
              textAlign: 'left',
              fontWeight: '500',
              color: { r: 92, g: 90, b: 90, a: 1 },
              margin: [0, 0, 0, 0],
              padding: [0, 0, 0, 0],
              shadow: 0,
              text: 'Text',
            },
            displayName: 'Text',
            custom: {},
            parent: 'FEqGl7p1V4',
            hidden: !1,
            nodes: [],
            linkedNodes: {},
          },
          'gKuarZ-R4b': {
            type: { resolvedName: 'CRow' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'solid',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              display: 'flex',
              bgColor: { r: 200, g: 200, b: 200, a: 1 },
            },
            displayName: 'CRow',
            custom: {},
            parent: 'ROOT',
            hidden: !1,
            nodes: ['nqprxZG25C'],
            linkedNodes: {},
          },
          nqprxZG25C: {
            type: { resolvedName: 'CColumn' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              width: -1,
              flex: 1,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'dashed',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'CColumn',
            custom: {},
            parent: 'gKuarZ-R4b',
            hidden: !1,
            nodes: ['mM4KdVql80'],
            linkedNodes: {},
          },
          mM4KdVql80: {
            type: { resolvedName: 'CIframe' },
            isCanvas: !0,
            props: {
              src: 'https://map.baidu.com/@13225221.26,3748918.53,12z',
              alt: 'MDN',
              height: 300,
              minHeight: 200,
              width: 400,
              maxWidth: '100%',
              margin: [0, 0, 0, 0],
              padding: [0, 0, 0, 0],
              borderSize: 0,
              borderType: 'solid',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'Iframe',
            custom: {},
            parent: 'nqprxZG25C',
            hidden: !1,
            nodes: [],
            linkedNodes: {},
          },
          '7wgWlhcoKe': {
            type: { resolvedName: 'CRow' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'solid',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              display: 'flex',
              bgColor: { r: 200, g: 200, b: 200, a: 1 },
            },
            displayName: 'CRow',
            custom: {},
            parent: 'ROOT',
            hidden: !1,
            nodes: ['HoV6EeSpYG'],
            linkedNodes: {},
          },
          HoV6EeSpYG: {
            type: { resolvedName: 'CColumn' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              width: -1,
              flex: 1,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'dashed',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'CColumn',
            custom: {},
            parent: '7wgWlhcoKe',
            hidden: !1,
            nodes: ['S5b-bYwRrM'],
            linkedNodes: {},
          },
          'S5b-bYwRrM': {
            type: { resolvedName: 'CVideo' },
            isCanvas: !0,
            props: {
              src: 'https://ia800300.us.archive.org/17/items/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4',
              poster: 'https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217',
              alt: '',
              controls: !0,
              height: 300,
              minHeight: 200,
              width: 400,
              maxWidth: '100%',
              margin: [0, 0, 0, 0],
              padding: [0, 0, 0, 0],
              borderSize: 0,
              borderType: 'solid',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'Video',
            custom: {},
            parent: 'HoV6EeSpYG',
            hidden: !1,
            nodes: [],
            linkedNodes: {},
          },
          '2G8d043avz': {
            type: { resolvedName: 'CRow' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'solid',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              display: 'flex',
              bgColor: { r: 200, g: 200, b: 200, a: 1 },
            },
            displayName: 'CRow',
            custom: {},
            parent: 'ROOT',
            hidden: !1,
            nodes: ['UjPPN7uO6m', 'lJej-VLlrM', 'OtlUEN3DKc', 'N1F8Qm65nd'],
            linkedNodes: {},
          },
          UjPPN7uO6m: {
            type: { resolvedName: 'CColumn' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              width: -1,
              flex: 1,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'dashed',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'CColumn',
            custom: {},
            parent: '2G8d043avz',
            hidden: !1,
            nodes: ['O4j_BFOHf9'],
            linkedNodes: {},
          },
          OtlUEN3DKc: {
            type: { resolvedName: 'CColumn' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              width: -1,
              flex: 1,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'dashed',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'CColumn',
            custom: {},
            parent: '2G8d043avz',
            hidden: !1,
            nodes: ['flo3Z4ohEf'],
            linkedNodes: {},
          },
          flo3Z4ohEf: {
            type: { resolvedName: 'CText' },
            isCanvas: !1,
            props: {
              fontSize: '15',
              textAlign: 'left',
              fontWeight: '500',
              color: { r: 92, g: 90, b: 90, a: 1 },
              margin: [0, 0, 0, 0],
              padding: [0, 0, 0, 0],
              shadow: 0,
              text: 'Text',
            },
            displayName: 'Text',
            custom: {},
            parent: 'OtlUEN3DKc',
            hidden: !1,
            nodes: [],
            linkedNodes: {},
          },
          O4j_BFOHf9: {
            type: { resolvedName: 'CText' },
            isCanvas: !1,
            props: {
              fontSize: '15',
              textAlign: 'left',
              fontWeight: '500',
              color: { r: 92, g: 90, b: 90, a: 1 },
              margin: [0, 0, 0, 0],
              padding: [0, 0, 0, 0],
              shadow: 0,
              text: 'Text',
            },
            displayName: 'Text',
            custom: {},
            parent: 'UjPPN7uO6m',
            hidden: !1,
            nodes: [],
            linkedNodes: {},
          },
          'lJej-VLlrM': {
            type: { resolvedName: 'CColumn' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              width: -1,
              flex: 1,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'dashed',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'CColumn',
            custom: {},
            parent: '2G8d043avz',
            hidden: !1,
            nodes: ['wpSB-EEX1j'],
            linkedNodes: {},
          },
          'wpSB-EEX1j': {
            type: { resolvedName: 'CText' },
            isCanvas: !1,
            props: {
              fontSize: '15',
              textAlign: 'left',
              fontWeight: '500',
              color: { r: 92, g: 90, b: 90, a: 1 },
              margin: [0, 0, 0, 0],
              padding: [0, 0, 0, 0],
              shadow: 0,
              text: 'Text',
            },
            displayName: 'Text',
            custom: {},
            parent: 'lJej-VLlrM',
            hidden: !1,
            nodes: [],
            linkedNodes: {},
          },
          N1F8Qm65nd: {
            type: { resolvedName: 'CColumn' },
            isCanvas: !0,
            props: {
              minHeight: 40,
              width: -1,
              flex: 1,
              margin: [0, 0, 0, 0],
              padding: [10, 10, 10, 10],
              borderSize: 1,
              borderType: 'dashed',
              borderColor: { r: 32, g: 32, b: 32, a: 1 },
              bgColor: { r: 250, g: 250, b: 250, a: 1 },
            },
            displayName: 'CColumn',
            custom: {},
            parent: '2G8d043avz',
            hidden: !1,
            nodes: ['7sipSof43d'],
            linkedNodes: {},
          },
          '7sipSof43d': {
            type: { resolvedName: 'CText' },
            isCanvas: !1,
            props: {
              fontSize: '15',
              textAlign: 'left',
              fontWeight: '500',
              color: { r: 92, g: 90, b: 90, a: 1 },
              margin: [0, 0, 0, 0],
              padding: [0, 0, 0, 0],
              shadow: 0,
              text: 'Text',
            },
            displayName: 'Text',
            custom: {},
            parent: 'N1F8Qm65nd',
            hidden: !1,
            nodes: [],
            linkedNodes: {},
          },
        },
        jsx_runtime = __webpack_require__('./node_modules/react/jsx-runtime.js');
      function _slicedToArray(arr, i) {
        return (
          (function _arrayWithHoles(arr) {
            if (Array.isArray(arr)) return arr;
          })(arr) ||
          (function _iterableToArrayLimit(arr, i) {
            var _i = null == arr ? null : ('undefined' != typeof Symbol && arr[Symbol.iterator]) || arr['@@iterator'];
            if (null == _i) return;
            var _s,
              _e,
              _arr = [],
              _n = !0,
              _d = !1;
            try {
              for (_i = _i.call(arr); !(_n = (_s = _i.next()).done) && (_arr.push(_s.value), !i || _arr.length !== i); _n = !0);
            } catch (err) {
              (_d = !0), (_e = err);
            } finally {
              try {
                _n || null == _i.return || _i.return();
              } finally {
                if (_d) throw _e;
              }
            }
            return _arr;
          })(arr, i) ||
          (function _unsupportedIterableToArray(o, minLen) {
            if (!o) return;
            if ('string' == typeof o) return _arrayLikeToArray(o, minLen);
            var n = Object.prototype.toString.call(o).slice(8, -1);
            'Object' === n && o.constructor && (n = o.constructor.name);
            if ('Map' === n || 'Set' === n) return Array.from(o);
            if ('Arguments' === n || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
          })(arr, i) ||
          (function _nonIterableRest() {
            throw new TypeError(
              'Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.',
            );
          })()
        );
      }
      function _arrayLikeToArray(arr, len) {
        (null == len || len > arr.length) && (len = arr.length);
        for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
        return arr2;
      }
      var SaveAndLoad = function (props) {
        var _useState2 = _slicedToArray(Object(react.useState)(''), 2),
          pageData = _useState2[0],
          setPageData = _useState2[1];
        return (
          Object(react.useEffect)(function () {
            setPageData(testPageData);
          }, []),
          Object(jsx_runtime.jsxs)(jsx_runtime.Fragment, {
            children: [
              Object(jsx_runtime.jsx)(react_markdown.a, {
                remarkPlugins: [remark_gfm.a],
                children:
                  '\n# 💾存储与加载\n- 请点击右上角的保存和加载按钮测试存储和加载功能。\n- Craft 会把页面序列化成 JSON 数据。           \n- 此例子中的数据被存储在 window.localStorage 中，在真实的业务系统中，可以把这份 JSON 数据保存到数据库。 带服务端接口的示例请参考： https://github.com/Craft-Codeless-Designer/Craft-Codeless-Designer-demo\n- 序列化和反序列化功能是由 useEditor() 钩子返回的 actions 对象提供的，细节参数请参考官方的文档：https://craft.js.org/docs/api/useEditor',
              }),
              Object(jsx_runtime.jsx)('br', {}),
              Object(jsx_runtime.jsx)(CraftDesigner.a, {
                pageData: pageData,
                onSaveData: function (jsonStr) {
                  window.localStorage.setItem('test-data', JSON.stringify(jsonStr)), message.b.success('Data saved to window.localStorage.');
                },
                onLoadData: function (evt) {
                  var testData = window.localStorage.getItem('test-data');
                  if (!testData) return console.error('There is no data in window.localStorage.'), null;
                  (testData = JSON.parse(testData)), setPageData(testData);
                },
              }),
            ],
          })
        );
      };
      (SaveAndLoad.__docgenInfo = { description: '', methods: [], displayName: 'SaveAndLoad' }),
        'undefined' != typeof STORYBOOK_REACT_CLASSES &&
          (STORYBOOK_REACT_CLASSES['stories\\save-and-load\\SaveAndLoad.jsx'] = {
            name: 'SaveAndLoad',
            docgenInfo: SaveAndLoad.__docgenInfo,
            path: 'stories\\save-and-load\\SaveAndLoad.jsx',
          });
    },
    './storybook-init-framework-entry.js': function (module, __webpack_exports__, __webpack_require__) {
      'use strict';
      __webpack_require__.r(__webpack_exports__);
      __webpack_require__('./node_modules/@storybook/react/dist/esm/client/index.js');
    },
    0: function (module, exports, __webpack_require__) {
      __webpack_require__('./node_modules/@storybook/core-client/dist/esm/globals/polyfills.js'),
        __webpack_require__('./node_modules/@storybook/core-client/dist/esm/globals/globals.js'),
        __webpack_require__('./storybook-init-framework-entry.js'),
        __webpack_require__('./node_modules/@storybook/react/dist/esm/client/preview/config-generated-config-entry.js'),
        __webpack_require__('./.storybook/preview.js-generated-config-entry.js'),
        (module.exports = __webpack_require__('./generated-stories-entry.js'));
    },
    1: function (module, exports) {},
  },
  [[0, 2, 3]],
]);
